沉香 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> 清舟弄了个那么小的香烛做播放器，开始都没注意到。看到那香一点点短下去，才反应过来{:4_187:} 这个香下得也太快了，歌曲没完就已经剩个红点了{:4_173:}
这个制作好美，猫猫收礼开心{:4_187:} 红影 发表于 2023-3-15 16:37
这个香下得也太快了，歌曲没完就已经剩个红点了
这个制作好美，猫猫收礼开心
是啊，做图时没考虑好，也发现了，现在改了一下时间看看还会不会只有红点的了{:4_189:} 制作真漂亮。老喜欢了，谢谢清舟！
特别喜欢这色彩，沉香萦绕于身边清辉柔柔，曼妙似舞，清明心境，又如此的宁馨安暖！真棒！
收藏了！
{:4_204:}{:4_199:}{:4_190:} 绿叶清舟 发表于 2023-3-15 16:42
是啊，做图时没考虑好，也发现了，现在改了一下时间看看还会不会只有红点的了
这样怪这名字，沉香啊，结果香就沉得很快了。哈哈，不知道沉香听到会不会很生气{:4_170:} 欣赏美帖 红影 发表于 2023-3-15 16:37
这个香下得也太快了，歌曲没完就已经剩个红点了
这个制作好美，猫猫收礼开心
来了，来了 {:4_187:}{:4_173:}谢谢红影！一起欣赏清舟美帖！
{:4_204:} 大猫咪 发表于 2023-3-15 16:54
制作真漂亮。老喜欢了，谢谢清舟！
特别喜欢这色彩，沉香萦绕于身边清辉柔柔，曼妙似舞，清明心境，又如 ...
不客气了，不是小仙女 的颜色了{:4_189:} 起个网名好难 发表于 2023-3-15 16:55
欣赏美帖
谢谢起个网名好难 大猫咪 发表于 2023-3-15 16:55
来了，来了 谢谢红影！一起欣赏清舟美帖！
清舟的制图绝对美美的，你看那文字，都泛着金光呢。播放器也用得巧妙。猫猫收到了一份精美的大礼呢{:4_177:}{:4_187:} 红影 发表于 2023-3-15 16:54
这样怪这名字，沉香啊，结果香就沉得很快了。哈哈，不知道沉香听到会不会很生气
就是啊，不能怪俺了{:4_189:} 绿叶清舟 发表于 2023-3-15 17:00
就是啊，不能怪俺了
哈哈，为了防止挨揍，俺赶紧溜了{:4_193:} 绿叶清舟 发表于 2023-3-15 16:59
不客气了，不是小仙女 的颜色了
变回大侠了 {:4_189:} 红影 发表于 2023-3-15 17:00
清舟的制图绝对美美的，你看那文字，都泛着金光呢。播放器也用得巧妙。猫猫收到了一份精美的大礼呢{:4_17 ...
就是 清舟用心之作 好有创意{:4_191:}{:4_204:} 起个网名好难 发表于 2023-3-15 16:55
欣赏美帖
问好朋友 一起欣赏{:4_191:}{:4_204:} 大猫咪 发表于 2023-3-15 17:03
变回大侠了
就是啊，冬雨少了个仙女了{:4_189:} 绿叶清舟 发表于 2023-3-15 17:06
就是啊，冬雨少了个仙女了
{:4_172:}多个大侠 大猫咪 发表于 2023-3-15 17:09
多个大侠
安全感少一份了{:4_189:} 绿叶清舟 发表于 2023-3-15 17:11
安全感少一份了
{:4_173:}