绿叶清舟 发表于 2022-10-16 21:57

七弦清音 - 巫娜


<style>
.wrap {
        left: -250px;
        width: 1100px;
        height: 700px;
        background: #ccc url('https://pic1.imgdb.cn/item/634b5a2a16f2c2beb18361d1.jpg') no-repeat;
        box-shadow: 2px 2px 10px gray;
        position: relative;
}
.candle {
        width: 2px;
        height: 120px;
        left: 910px;
        bottom: 210px;
        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::before {
        position: absolute; content: ''; width: 4px; height: 18px;
        top: -5px; left: calc(50% - 2px); border-radius: 0 100%;
        background: #dfe0e0; box-shadow: -1px -8px 24px 6px #f5f5f5;
        transform-origin: bottom: 210px; animation: swag 2s 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=304943.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 = 160 - prog * 1.6 + 'px';
}
</script>

小辣椒 发表于 2022-10-16 22:06

沙发我的{:4_174:}

小辣椒 发表于 2022-10-16 22:07

清舟这么迟了还做图图。辛苦的

小辣椒 发表于 2022-10-16 22:07

清舟很会选图，每个图图意境美美的

小辣椒 发表于 2022-10-16 22:08

特别标题字都是特别的美{:4_178:}

红影 发表于 2022-10-16 23:17

这个制作如梦似幻，配合着幽雅的曲子，特别美好{:4_199:}

红影 发表于 2022-10-16 23:20

烛烟袅袅，曲韵悠扬，静夜里听来，令人神思缥缈，不知身之所在。{:4_204:}

马黑黑 发表于 2022-10-16 23:22

粥粥的创作进入了一个优雅别致的境界，真实棒棒的呢

相约爱晚亭 发表于 2022-10-17 10:11

欣赏音画佳作！

梦油 发表于 2022-10-17 10:28

画面简洁，构思巧妙。

绿叶清舟 发表于 2022-10-17 19:27

小辣椒 发表于 2022-10-16 22:07
清舟这么迟了还做图图。辛苦的

辣椒好，上午就做好了要出门没发出来的

绿叶清舟 发表于 2022-10-17 19:30

马黑黑 发表于 2022-10-16 23:22
粥粥的创作进入了一个优雅别致的境界，真实棒棒的呢

把蜡烛变成香了，上面的火改成了烟的颜色，本来想变成一点红的可看不去不谐调

绿叶清舟 发表于 2022-10-17 19:31

梦油 发表于 2022-10-17 10:28
画面简洁，构思巧妙。

梦油好，现在找素材太难了，只能走简洁的了

绿叶清舟 发表于 2022-10-17 19:31

相约爱晚亭 发表于 2022-10-17 10:11
欣赏音画佳作！

谢谢相约支持

绿叶清舟 发表于 2022-10-17 19:31

红影 发表于 2022-10-16 23:17
这个制作如梦似幻，配合着幽雅的曲子，特别美好

找找播放器在哪{:4_189:}

马黑黑 发表于 2022-10-17 20:18

绿叶清舟 发表于 2022-10-17 19:30
把蜡烛变成香了，上面的火改成了烟的颜色，本来想变成一点红的可看不去不谐调

慢慢调试，用最好的和最会的

绿叶清舟 发表于 2022-10-17 20:33

马黑黑 发表于 2022-10-17 20:18
慢慢调试，用最好的和最会的

最会的不让玩了啊，现在的都是从头来过了

马黑黑 发表于 2022-10-17 20:34

绿叶清舟 发表于 2022-10-17 20:33
最会的不让玩了啊，现在的都是从头来过了

那也挺好的吧

梦油 发表于 2022-10-17 20:35

绿叶清舟 发表于 2022-10-17 19:31
梦油好，现在找素材太难了，只能走简洁的了

简洁但不简单。

红影 发表于 2022-10-18 09:40

绿叶清舟 发表于 2022-10-17 19:31
找找播放器在哪

哦哦，在那香炉里，这个巧妙{:4_199:}
页: [1] 2
查看完整版本: 七弦清音 - 巫娜