绿叶清舟 发表于 2023-3-15 16:22

沉香 TO大猫咪

本帖最后由 绿叶清舟 于 2023-3-15 20:27 编辑 <br /><br /><style>
.wrap {
        left: -250px;
        width: 1100px;
        height: 700px;
        background: #ccc url('https://pic.imgdb.cn/item/640d3a6ef144a01007947373.jpg') no-repeat;
        box-shadow: 2px 2px 10px gray;
        position: relative;
}
.candle {
        width: 2px;
        height: 30px;
        left: 723px;
        bottom: 140px;
        cursor: pointer;
        background: #ffdec0 linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.6));
        box-shadow: 0 0 20px gray;
        position: absolute;
}
.candle::after {
      position: absolute;
      content: '';
      width: 20px;
      height: 30px;
      left: -10px;
}
.candle::before {
        position: absolute; content: ''; width: 2px; height: 2px;
        top: -px; left: calc(50% - 1px); border-radius: 0 100%;
        background: #fe0215; box-shadow: -1px -8px 24px 6px #f5f5f5;
        transform-origin: bottom: 210px; animation: swag 6s ease-in infinite alternate;
}

@keyframes swag { to { transform: rotate(10deg); } }
</style>

<div class="wrap">
        <div class="candle"></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=489095199.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
let candle = document.querySelector('.candle'), aud = document.querySelector('#aud');
let current, task;

candle.onclick = () =>{ aud.paused ? aud.play() : aud.pause(); };

aud.addEventListener('timeupdate', function(){
        task = aud.duration;
        current = aud.currentTime;
        setProgress(task,current);
});

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        candle.style.height = 80 - prog * 0.6 + 'px';
}
</script>

红影 发表于 2023-3-15 16:33

清舟弄了个那么小的香烛做播放器,开始都没注意到。看到那香一点点短下去,才反应过来{:4_187:}

红影 发表于 2023-3-15 16:37

这个香下得也太快了,歌曲没完就已经剩个红点了{:4_173:}
这个制作好美,猫猫收礼开心{:4_187:}

绿叶清舟 发表于 2023-3-15 16:42

红影 发表于 2023-3-15 16:37
这个香下得也太快了,歌曲没完就已经剩个红点了
这个制作好美,猫猫收礼开心

是啊,做图时没考虑好,也发现了,现在改了一下时间看看还会不会只有红点的了{:4_189:}

大猫咪 发表于 2023-3-15 16:54

制作真漂亮。老喜欢了,谢谢清舟!

特别喜欢这色彩,沉香萦绕于身边清辉柔柔,曼妙似舞,清明心境,又如此的宁馨安暖!真棒!

收藏了!

{:4_204:}{:4_199:}{:4_190:}

红影 发表于 2023-3-15 16:54

绿叶清舟 发表于 2023-3-15 16:42
是啊,做图时没考虑好,也发现了,现在改了一下时间看看还会不会只有红点的了

这样怪这名字,沉香啊,结果香就沉得很快了。哈哈,不知道沉香听到会不会很生气{:4_170:}

起个网名好难 发表于 2023-3-15 16:55

欣赏美帖

大猫咪 发表于 2023-3-15 16:55

红影 发表于 2023-3-15 16:37
这个香下得也太快了,歌曲没完就已经剩个红点了
这个制作好美,猫猫收礼开心

来了,来了 {:4_187:}{:4_173:}谢谢红影!一起欣赏清舟美帖!

{:4_204:}

绿叶清舟 发表于 2023-3-15 16:59

大猫咪 发表于 2023-3-15 16:54
制作真漂亮。老喜欢了,谢谢清舟!

特别喜欢这色彩,沉香萦绕于身边清辉柔柔,曼妙似舞,清明心境,又如 ...

不客气了,不是小仙女 的颜色了{:4_189:}

绿叶清舟 发表于 2023-3-15 16:59

起个网名好难 发表于 2023-3-15 16:55
欣赏美帖

谢谢起个网名好难

红影 发表于 2023-3-15 17:00

大猫咪 发表于 2023-3-15 16:55
来了,来了   谢谢红影!一起欣赏清舟美帖!

清舟的制图绝对美美的,你看那文字,都泛着金光呢。播放器也用得巧妙。猫猫收到了一份精美的大礼呢{:4_177:}{:4_187:}

绿叶清舟 发表于 2023-3-15 17:00

红影 发表于 2023-3-15 16:54
这样怪这名字,沉香啊,结果香就沉得很快了。哈哈,不知道沉香听到会不会很生气

就是啊,不能怪俺了{:4_189:}

红影 发表于 2023-3-15 17:02

绿叶清舟 发表于 2023-3-15 17:00
就是啊,不能怪俺了

哈哈,为了防止挨揍,俺赶紧溜了{:4_193:}

大猫咪 发表于 2023-3-15 17:03

绿叶清舟 发表于 2023-3-15 16:59
不客气了,不是小仙女 的颜色了

变回大侠了 {:4_189:}

大猫咪 发表于 2023-3-15 17:05

红影 发表于 2023-3-15 17:00
清舟的制图绝对美美的,你看那文字,都泛着金光呢。播放器也用得巧妙。猫猫收到了一份精美的大礼呢{:4_17 ...

就是   清舟用心之作   好有创意{:4_191:}{:4_204:}

大猫咪 发表于 2023-3-15 17:06

起个网名好难 发表于 2023-3-15 16:55
欣赏美帖

问好朋友   一起欣赏{:4_191:}{:4_204:}

绿叶清舟 发表于 2023-3-15 17:06

大猫咪 发表于 2023-3-15 17:03
变回大侠了

就是啊,冬雨少了个仙女了{:4_189:}

大猫咪 发表于 2023-3-15 17:09

绿叶清舟 发表于 2023-3-15 17:06
就是啊,冬雨少了个仙女了
{:4_172:}多个大侠

绿叶清舟 发表于 2023-3-15 17:11

大猫咪 发表于 2023-3-15 17:09
多个大侠

安全感少一份了{:4_189:}

大猫咪 发表于 2023-3-15 17:13

绿叶清舟 发表于 2023-3-15 17:11
安全感少一份了

{:4_173:}
页: [1] 2 3
查看完整版本: 沉香 TO大猫咪