流逝的时光（学习黑黑迷幻效果）
<style>#papa { margin: 120px 0 0 calc(50% - 681px); width: 1200px; height: 675px; background: gray url('https://pic.imgdb.cn/item/6399eb28b1fccdcd360d1cbe.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; overflow: hidden; perspective: 3000px; z-index: 1; }
#mama { position: absolute; left: 574px; top: 356px; animation: rot 2s infinite alternate; transform-style: preserve-3d; cursor: pointer; }
#mama::before { position: absolute; content: ''; left: -200px; top: -200px; right: -200px; bottom: -200px;}
.tit { position: absolute; top: 10px; font: italic 4.5em Georgia,serif; color: hsla(90,50%,50%,.3); text-shadow: 1px 1px 2px #000, -5px -5px 10px snow, 5px 5px 10px snow; animation: flash 3s infinite alternate linear; }
.ball { --yy: 200px; position: absolute; width: 1px; height: 1px; background: darkgray; border-radius: 50%; display: grid; place-items: center; opacity: .65; }
@keyframes rot { from { transform: skew(-2deg,-5deg) rotateZ(10deg); } to { transform: skew(2deg,5deg) rotateZ(10deg); } }
@keyframes flash { to { text-shadow: 1px 1px 2px #000, -5px -5px 20px darkgreen, 5px 5px 20px darkgreen; } }
</style>
<div id="papa">
<div class="tit">流逝的时光</div>
<div id="mama"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1497754064.mp3" autoplay></audio>
</div>
<script>
(function() {
let total = 180, angle = 0, step =1, rAnf;
for(i=0; i<total; i++) {
let e = document.createElement('span');
e.className = 'ball';
e.style.background = `#${Math.random().toString(16).substr(-6)}`;
e.style.width = e.style.height = i*0.2 + 1 + 'px';
e.style.transform = `rotate(${angle/total*i}deg) translate(${i*1.2}px)`;
mama.appendChild(e);
}
let balls = document.querySelectorAll('.ball');
let render = () => {
let rand = Math.floor(Math.random()* total);
angle += step;
balls.forEach((e,k) => {
if(k === rand) e.style.background = `#${Math.random().toString(16).substr(-6)}`;
e.style.transform = `rotateZ(${angle/total*k}deg) translateY(${k*1.2}px)`;
});
if(angle > 7200 || angle< 0) step = - step;
if(rAnf > 0) cancelAnimationFrame(rAnf);
if(!aud.paused) rAnf = requestAnimationFrame(render);
};
let mState = () => aud.paused ? (mama.style.animationPlayState = 'paused') : (mama.style.animationPlayState = 'running');
mama.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => { mState(); rAnf = requestAnimationFrame(render);});
aud.addEventListener('ended', () => { cancelAnimationFrame(rAnf); aud.play(); });
})();
</script> 套用个代码，看看在浅色系上的效果。谢谢黑黑的代码{:4_187:} 这个图图的两只手太大了点{:4_173:} 红影 发表于 2022-12-14 23:48
套用个代码，看看在浅色系上的效果。谢谢黑黑的代码
亲爱的，不错，这个效果也是很棒{:4_178:} 嘿！真有意思，神奇的设计。 小辣椒 发表于 2022-12-15 01:03
亲爱的，不错，这个效果也是很棒
什么都没加，只是套用个代码{:4_173:} 梦油 发表于 2022-12-15 10:04
嘿！真有意思，神奇的设计。
是啊，黑黑的这个代码特别神奇，而且语句不多。 红影 发表于 2022-12-15 10:11
是啊，黑黑的这个代码特别神奇，而且语句不多。
真棒，真棒！ 这个应该是牛鼻子怎么牵到手上了{:4_170:} 梦油 发表于 2022-12-15 13:16
真棒，真棒！
今天身体不舒服，一会看看就下了。 辫子哥哥 发表于 2022-12-15 20:14
这个应该是牛鼻子怎么牵到手上了
牵到你辫子后面怎样{:4_170:} 红影 发表于 2022-12-15 20:26
牵到你辫子后面怎样
试一个{:4_199:} 看着那条彩色的长条，慢慢地转呀转，知道它会转出美丽的花式，{:4_173:} 好漂亮啊{:4_181:} 红影 发表于 2022-12-14 23:49
这个图图的两只手太大了点
哈哈，{:4_173:} 辫子哥哥 发表于 2022-12-15 20:27
试一个
我怕它转起来后把你甩晕了{:4_170:} 千羽 发表于 2022-12-15 21:50
看着那条彩色的长条，慢慢地转呀转，知道它会转出美丽的花式，
是啊，黑黑的这个代码效果特别奇特，赶紧跟着学一个{:4_173:} 千羽 发表于 2022-12-15 21:51
好漂亮啊
谢谢羽儿鼓励{:4_187:} 千羽 发表于 2022-12-15 21:53
哈哈，
不过手大了也好，正好把效果都搂在手里了{:4_189:} 真有趣，感谢老师的分享！{:4_187:}