论坛 › 『唯美音画』 › 旧欢如梦话当年 TO：秋水翦瞳

宁静 发表于 2022-7-13 10:58

旧欢如梦话当年 TO：秋水翦瞳

本帖最后由 宁静 于 2023-2-22 15:55 编辑 <br /><br /><style>
.mama { left: -200px; width: 1280px; height: 704px; top:150px; background: teal url('https://wj1.zp68.com:812/lxx/yunhua/2022/06/01/xlaj.gif') no-repeat; box-shadow: 2px 2px 4px #333; position: relative; }
.mama::before, .mama::after { position: absolute; content: ''; width: 80px; height: 80px; left: 100px; top: 120px; border-radius: 50%; background: Silver; }
.wrap { left: 540px; top: 620px; width: 200px; height: 20px; box-shadow: 1px 1px 2px gray; border-radius: 8px; background-color: tan; background-image: linear-gradient(rgba(255,0,0,.25), rgba(255,0,0,.15)); background-repeat: no-repeat; background-size:0% 100%; position: absolute; display: flex; cursor: pointer; }
.ball { position: relative; width: 20px; height: 20px; border-radius: 50%; display: block; }
.ball::before { content: ''; position: absolute; width: inherit; height: inherit; border-radius: 50%; background: radial-gradient(at 35% 40%, rgba(255,0,0,.5), rgba(255,0,0,.6)); }
@keyframes goRight { from { transform: translate(0) rotate(0); } to {transform: translate(100px) rotate(1turn); } }
@keyframes goLeft { from { transform: translate(100px) rotate(0); } to {transform: translate(0) rotate(-1turn); } }

</style>

<div class="mama">
        <div class="wrap"></div>
        <audio id="aud" src="https://wj1.zp68.com:812/lxx/yunhua/2022/06/01/002.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>

let wrap = document.querySelector('.wrap'), aud = document.querySelector('#aud');
let step = -1, dir = 'goRight';
let gcolor = () => '#' + Math.random().toString(16).substr(-6), prog = (tt, cc) => 100 * cc / tt;

Array.from({length: 5}).forEach((ele) => {
        ele = document.createElement('span');
        ele.className = 'ball';
        ele.setAttribute('style','background: linear-gradient(120deg, ' +gcolor() + ', ' + gcolor() + ')');
        wrap.appendChild(ele);
});

let ball = document.querySelectorAll('.ball'), total = ball.length;

wrap.onclick = () => aud.paused ? aud.play() : aud.pause();

function ballgo() {
        total = total + step;
        if(total < 0) {
                step = 1;
                total = 0;
                dir = 'goLeft';
        }
        if(total >= ball.length) {
                step = -1;
                total = ball.length - 1;
                dir = 'goRight';
        }
        ball.style.animation = dir + ' 2s linear forwards';
        wrap.style.transform = dir == 'goRight'? 'rotate(1deg)' : 'rotate(-1deg)';
        let timer = setTimeout(ballgo, 2000);
}

aud.addEventListener('timeupdate', () => wrap.style.backgroundSize = prog(aud.duration, aud.currentTime) + '%, 100%');

ballgo();

</script>
<br><br><br><br><br><br><br><br><br><br>

宁静 发表于 2022-7-13 11:01

@秋水翦瞳

秋水，一晃一年没有见了，很喜欢这首歌送你一起欣赏

浅笑 发表于 2022-7-13 11:31

喜欢她的歌，我先听会去叫秋水啊

蜻蜓 发表于 2022-7-13 12:16

那壁灯好看！{:9005:}

秋水翦瞳 发表于 2022-7-13 17:08

宁静 发表于 2022-7-13 11:01
@秋水翦瞳

秋水，一晃一年没有见了，很喜欢这首歌送你一起欣赏

谢谢宁静送我的惊喜哈，这歌也是我喜欢的调调，很喜欢听~~~

撒哈拉的雨 发表于 2022-7-13 19:43

小妹这个播放器是代码编辑的{:9022:}

撒哈拉的雨 发表于 2022-7-13 19:43

我以后还是学习代码编辑手机可以听到

一抹微蓝 发表于 2022-7-13 20:37

漂亮的播放器，歌儿也好听，喜欢　喜欢　{:10_402:}

宁静 发表于 2022-7-13 21:03

浅笑 发表于 2022-7-13 11:31
喜欢她的歌，我先听会去叫秋水啊

笑笑也是喜欢啊，这首歌特别轻轻柔柔的，感觉好听

宁静 发表于 2022-7-13 21:04

蜻蜓 发表于 2022-7-13 12:16
那壁灯好看！

是啊，蜻蜓也是会看的，这个灯是AE制作的粒子光感效果

查看完整版本: 旧欢如梦话当年 TO：秋水翦瞳