迷幻
<style>#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/t22/webp/huan.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; overflow: hidden; perspective: 3000px; z-index: 1; }
#papa::before { position: absolute; content: '迷幻'; right: 30px; top: 15px; font: bold 3em sans-serif; color: #000; text-shadow: 2px 2px 4px #eee; }
#mama { position: absolute; left: 260px; top: 240px; animation: rot 2s infinite alternate; transform-style: preserve-3d; cursor: pointer; }
#mama::before { position: absolute; content: ''; left: -200px; top: -200px; right: -200px; bottom: -200px;}
.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); } }
</style>
<div id="papa">
<div id="mama"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=31721581.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>
<p>如果听不到音乐，动画特效出不来。可以点击下方的链接换个音乐看看（与原帖音乐不同）：<br><br></p>
<p><a style="cursor: pointer;" onclick="javascript: aud.src='http://www.kumeiwp.com/sub/filestores/2021/11/18/72e3527a9d3b8d90212ec88aa025a631.mp3'">换音乐</a></p>
原来点击二楼的就能换音乐，这个功能也很神奇啊{:4_187:} 变幻万千啊，由孙大圣的金箍棒变成了旋转的漩涡。漩涡的排布变幻不停，让人看得迷醉。黑黑太厉害了{:4_199:} 还有高亮的个体在漩涡里乱窜，哈哈，这个太玄妙了吧，还是变化中的东西好看，这漩涡还会扭动呢，跟在跳舞似的，这个效果太棒了{:4_199:} 感受一首歌不够所有变化轮回一遍，我好像听到2到3遍的时候，这漩涡效果才绕到初始状态并重新开始了{:4_199:} 是我的错觉么，看那漩涡看久了，觉得美女身下的金色沙土也动起来了呢{:4_203:} 这样玄妙的效果，让人更感受到了代码的强大{:4_199:} 醉美水芙蓉 发表于 2022-12-14 11:44
欣赏黑黑老师新特效！
感谢支持 红影 发表于 2022-12-14 12:06
原来点击二楼的就能换音乐，这个功能也很神奇啊
DOM节点里，每一个元素都可以通过JS去操作，比如给 audio 标签更换音乐，它有id，id="aud"，就可以在一个单击事件中给 aud 的 src 赋上新值：
<a onclick="javascript: aud.src = '新音乐地址'">换歌曲</a>
上面叫嵌入式JS。在 JS 常规代码中写也可以：
<a id="chgsong">换歌曲</a>
<script>
//其他代码
chgsong.onclick = () => aud.src = '新音乐地址';
//其他代码
</script> 红影 发表于 2022-12-14 12:19
这样玄妙的效果，让人更感受到了代码的强大
代码就是将CSS、HTML的功能组装起来，组装过程不是简单的东拼西凑，而是或用CSS、HTML特有的属性和参数，将这些有机的调遣起来 红影 发表于 2022-12-14 12:18
是我的错觉么，看那漩涡看久了，觉得美女身下的金色沙土也动起来了呢
是的，这是错觉。在视觉学里，有色感共性概念，它的影响不仅仅局限于色彩，还有动感。 红影 发表于 2022-12-14 12:14
感受一首歌不够所有变化轮回一遍，我好像听到2到3遍的时候，这漩涡效果才绕到初始状态并重新开始了{:4_199: ...
不会吧？一支曲子播放过程中就能看到“轮回”。 红影 发表于 2022-12-14 12:09
变幻万千啊，由孙大圣的金箍棒变成了旋转的漩涡。漩涡的排布变幻不停，让人看得迷醉。黑黑太厉害了{:4_199: ...
这个仅是利用 rotate 和 translate 的变幻，辅之以 skew ，通过一系列算法就能得出的效果。关键是要想得到角度要多大，要大得离谱，这个很多人可能没想到要这样去试。 哇瑟~~这个是真迷幻了{:4_178:} 音乐还可以这样换，黑黑太神了{:4_178:} 黑黑艺术细胞特别多，每个效果的配图就可以看出 马黑黑 发表于 2022-12-14 12:41
DOM节点里，每一个元素都可以通过JS去操作，比如给 audio 标签更换音乐，它有id，id="aud"，就可以在一个 ...
也是和在哪个楼层无关，只要没翻页，这个操作就是有效的吧。学习了{:4_187:} 马黑黑 发表于 2022-12-14 12:43
代码就是将CSS、HTML的功能组装起来，组装过程不是简单的东拼西凑，而是或用CSS、HTML特有的属性和参数， ...
是啊，有设计理念的组装，才会得到美妙的效果呢{:4_187:} 马黑黑 发表于 2022-12-14 12:46
是的，这是错觉。在视觉学里，有色感共性概念，它的影响不仅仅局限于色彩，还有动感。
被这个效果吸引，不觉看了许久，然后看别处，貌似都有点动感{:4_173:}