旧欢如梦话当年（学习黑黑滚珠播放器）
<style>
.mama { left: -340px; width: 1282px; height: 706px; 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> 套用一个黑黑刚才的六一儿童节的玩一个@马黑黑 谢谢岁月的AE效果，用了你的图片光感效果@走过岁月
旧欢如梦话当年
https://www.huachaowang.com/forum.php?mod=viewthread&tid=57800&fromuid=4275
(出处: 花潮论坛)
黑黑，这个月亮我修改了颜色，但我不会修改月亮的闪光{:4_173:} 小辣椒好漂亮的制作。粒子效果真经典啊。{:4_199:} 加林森 发表于 2022-6-1 17:46
小辣椒好漂亮的制作。粒子效果真经典啊。
队长是岁月的光感效果，感觉漂亮就去做了个动图 小辣椒 发表于 2022-6-1 17:49
队长是岁月的光感效果，感觉漂亮就去做了个动图
哦，我会去试一试的。 加林森 发表于 2022-6-1 17:51
哦，我会去试一试的。
这个你应该还不会的{:4_173:} 小辣椒 发表于 2022-6-1 17:52
这个你应该还不会的
是不会的，怎么办呢？{:4_203:} 这是采用的鲜艳版。帖子做的相当漂酿 小辣椒 发表于 2022-6-1 17:35
黑黑，这个月亮我修改了颜色，但我不会修改月亮的闪光
我的那个月亮是没有设置闪光的 马黑黑 发表于 2022-6-1 18:19
我的那个月亮是没有设置闪光的
黑黑，我不会设置{:4_201:} 马黑黑 发表于 2022-6-1 18:10
这是采用的鲜艳版。帖子做的相当漂酿
黑黑六一这个滚珠我今天看见的，刚好前几天就想做一个，去玩岁月的那个光感效果了，今天就用上了 很漂亮，动图元素用得恰当，光感效果也很惊艳，亲爱的真棒{:4_199:} 加林森 发表于 2022-6-1 18:06
是不会的，怎么办呢？
要先会学习软件制作的 红影 发表于 2022-6-1 18:33
很漂亮，动图元素用得恰当，光感效果也很惊艳，亲爱的真棒
这个是黑黑和岁月的功劳{:4_170:}
我是装运工 小辣椒 发表于 2022-6-1 18:39
要先会学习软件制作的
嗯嗯，知道了！ 小辣椒 发表于 2022-6-1 18:33
黑黑六一这个滚珠我今天看见的，刚好前几天就想做一个，去玩岁月的那个光感效果了，今天就用上了
挺好的 小辣椒 发表于 2022-6-1 18:30
黑黑，我不会设置
不用设置，你的帖子无需这个 小辣椒 发表于 2022-6-1 18:40
这个是黑黑和岁月的功劳
我是装运工
亲爱的融入了自己的构思，把歌曲含义诠释得很到位{:4_187:}