神秘异域风情（学习黑黑示波状响应式频谱）
<style>#papa { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 560px; background: #0b1a3a; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#tu {position: absolute; right: 0px; top: 0px;opacity: 0.8; animation: flash11 linear 3sinfinite alternate; }
.hy {
position: absolute;
z-index: 2;
width: 40px;
height: 40px;
background: white url('http://image.hnol.net/c/2022-02/18/20/202202182042013221-5088534.gif');
border-radius: 50%;
opacity: 0.3;
transform: rotate(25deg);
animation: spla var(--k) infinite var(--state);
}
.hy:nth-of-type(1){ left:100px; top:400px; --k: 4s;}
.hy:nth-of-type(2){ left:260px; top:500px; --k: 3s; }
.hy:nth-of-type(3){ left:160px; top:120px; --k: 2s; }
.hy:nth-of-type(4){ left:380px; top:80px; --k: 3s; }
.hy:nth-of-type(5){ left:940px; top:106px; --k: 2s; }
.hy:nth-of-type(6){ left:820px; top:400px; --k: 4s; }
.hy:nth-of-type(7){ left:800px; top:120px; --k: 5s; }
@keyframes spla {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; transform:scale(1.2) rotate(-25deg); }
}
@keyframes flash11 { to { opacity: .4; } }
</style>
<div id="papa">
<img id="tu" src="https://pic.imgdb.cn/item/64edac29661c6c8e541c9d49.jpg" alt="" />
<span class="hy"></span>
<span class="hy"></span>
<span class="hy"></span>
<span class="hy"></span>
<span class="hy"></span>
<span class="hy"></span>
<span class="hy"></span>
</div>
<audio id="aud" crossorigin="anonymous" src="https://yinyue1111.s3-us-east-1.ossfiles.com/yiyufengqing.mp3" autoplay></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/xyosc_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [ , ];
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: `
left: 30px;
top: 20px;
color: lightblue;
--bg: linear-gradient(rgba(100,140,50,.15),rgba(100,140,50,.45));
`,
player_css: `
bottom: 180px;
left: 132px;
--ww: 300px;
`,
pinpu: { size: 4, gap: 2, color1: 'rgba(255,187,0,.8)', color2: 'snow'},
fs_css: 'left: -100px; top: 10px; --color: #eee; --bg: #333;', /* 全屏按钮 */
});
};
})();
</script> 跟在后面学习一下。这个效果真好，可以看到音乐的演示呢。谢谢黑黑的代码{:4_187:} 想起以前做的萤火虫效果，顺带复习了一下，也复习了一下背景明暗变化。
那个萤火虫效果记得当时换了背景，觉得挺适合这个帖子，索性直接用了{:4_173:} 用了7个转动球形的效果，怎么感觉当中的那个不动呢？找半天没找出原因@马黑黑 {:4_173:} 6个小动图效果特别棒{:4_178:} 亲爱的就是会动脑子，同时加了几个效果进去 这个教程我中午看见的，感觉跨越音乐确实挺好的 这支异域乐曲真好听。 欣赏佳作！{:4_187:} 红影 发表于 2023-8-29 20:05
用了7个转动球形的效果，怎么感觉当中的那个不动呢？找半天没找出原因@马黑黑
你使用 nth-child 来设定 span 兄弟元素，不建议。要想精准设置一组兄弟元素的第n个的样式，请使用 nth-of-type(n)，这样，n就是第n个兄弟元素。
另外，#papa span 的表达，是定义 #papa 之下所有子子孙孙辈的 span 元素，如果不能确保 #papa 下到底有没有其他的 span 元素，请用 #papa > span 来指定 span 元素是 #papa 的第一代子元素 醉美水芙蓉 发表于 2023-8-29 20:27
中间一个小球不动，不会是受频谱影响吧！
和频谱无关，这是主帖CSS设定的问题，修改一下就好 红影 发表于 2023-8-29 20:03
跟在后面学习一下。这个效果真好，可以看到音乐的演示呢。谢谢黑黑的代码
红影制作神速！学习了！{:4_187:} 小辣椒 发表于 2023-8-29 20:17
6个小动图效果特别棒
这个是很早以前黑黑的效果，我重新复习一下{:4_173:} 小辣椒 发表于 2023-8-29 20:18
亲爱的就是会动脑子，同时加了几个效果进去
这些效果都是想复习的，多复习以后才不会忘{:4_173:} 小辣椒 发表于 2023-8-29 20:20
这个教程我中午看见的，感觉跨越音乐确实挺好的
是啊，而且黑黑的代码插件真的太好了，做帖子变得特别容易呢{:4_204:} 梦油 发表于 2023-8-29 20:20
这支异域乐曲真好听。
呵呵，我都不知道这音乐叫什么名，就是听听觉得不错，就用上了{:4_173:} 焱鑫磊 发表于 2023-8-29 20:21
欣赏佳作！
多谢焱鑫磊鼓励，晚上好{:4_187:} 醉美水芙蓉 发表于 2023-8-29 20:27
中间一个小球不动，不会是受频谱影响吧！
不是，这个是css里的，和js无关呢。