风叶穿行（8bit背景音乐）

马黑黑

全屏观赏

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         --state: paused;
   
4.         margin: -80px 0 0 calc(50% - 593px);
   
5.         display: grid;
   
6.         place-items: center;
   
7.         width: 1024px;
   
8.         height: 640px;
   
9.         background: lightblue url('https://638183.freep.cn/638183/t23/webp/fyix.webp') no-repeat center/cover;
   
10.         box-shadow: 6px 3px 20px #000;
    
11.         user-select: none;
    
12.         position: relative;
    
13.         z-index: 1;
    
14. }
    
15. #mplayer {
    
16.         position: absolute;
    
17.         width: fit-content;
    
18.         height: fit-content;
    
19.         top: 40px;
    
20.         cursor: pointer;
    
21. }
    
22. .ball {
    
23.         margin: 2px;
    
24.         width: 20px;
    
25.         height: 20px;
    
26.         border-radius: 50%;
    
27.         background: lightblue;
    
28.         opacity:  .45;
    
29.         position: relative;
    
30.         display: inline-block;
    
31.         box-shadow: -4px -4px 4px blue;
    
32. }
    
33. #btnFs {
    
34.         position: absolute;
    
35.         bottom: 20px;
    
36.         width: fit-content;
    
37.         height: fit-content;
    
38.         padding: 6px;
    
39.         border-radius: 6px;
    
40.         border: 2px solid snow;
    
41.         color: snow;
    
42.         text-shadow: 1px 1px 1px #000;
    
43.         display: none;
    
44.         cursor: pointer;
    
45. }
    
46. @keyframes flash { to { box-shadow: 0 0 60px 20px blue, -2px -2px 8px snow inset; } }
    
47. </style>
    
48. 
    
49. <div id="papa">
    
50.         <div id="mplayer"></div>
    
51.         <div id="btnFs">全屏观赏</div>
    
52.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1933216917.mp3" autoplay loop></audio>
    
53. </div>
    
54. 
    
55. <script>
    
56. (function() {
    
57.         let total = 26, fs = false, timerId;
    
58.         for(i = 0; i < total; i++) {
    
59.                 let span = document.createElement('span');
    
60.                 span.className = 'ball';
    
61.                 span.style.cssText += `
    
62.                         animation: flash ${Math.random()}s infinite alternate var(--state);
    
63.                 `;
    
64.                 mplayer.appendChild(span);
    
65.         }
    
66.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
67.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
68.         aud.addEventListener('play', () => mState());
    
69.         aud.addEventListener('pause', () => mState());
    
70.         aud.addEventListener('ended', () => playNext());
    
71.         aud.addEventListener('error', () => {
    
72.                 if(aud.error.code === 4) aud.src = 'http://www.kumeiwp.com/sub/filestores/2023/02/28/466426af58d0bcacee07591638ed5f9a.mp3';
    
73.         });       
    
74.         papa.addEventListener('mousemove', (e) => {
    
75.                 clearTimeout(timerId);
    
76.                 btnFs.style.display = 'block';
    
77.                 timerId = setTimeout('btnFs.style.display = "none"', 3000);
    
78.         });
    
79.         btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
    
80.         document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
    
81. })();
    
82. </script>

复制代码

马黑黑

播放控制器效果说明：

小球由类名为 ball 的CSS选择器 .ball 设置样式，它们宽高 20*20，彼此间间隔 2px，圆形，背景浅蓝色，不透明度 0.45，相对定位，行内块显示模式，有一个基础阴影。它们是 id="mplayer" 容器的子元素。

小球有 JS 生成，生成过程赋予其调用关键帧动画 flash 的功能，每个小球运行动画的周期时长随机获取，都在一秒之内（会一定概率存在0秒，严谨的话应再加0.1秒）。

而 @keyframes 定义的 flash 关键帧动画，使用盒子阴影实现，一个外阴影，一个内阴影，内外结合以营造扑朔迷离的闪动效果。此外，初始阴影也会在动画过程中产生作用。

马黑黑

思考：如果小球背景色设置为全透明（background: transparent），会得出什么效果？

马黑黑

关于背景音乐：

这是防 8bit 的音乐，就是DOS时代常听到的音源。bit是位的意思，与存储有关，8bit指音源的每一个采样值都有2的8次方（即256）种可能（不一定那么多）。玩过任天堂红白机的朋友对此应有感触。

马黑黑

这个播放控制器闪动效果，猛一看，像是响应音频的东东，其实不是哈。它只是闪动频率偏快，与音乐节拍貌似能踩点而已。

庶民

这样的背景音乐，很感兴趣。

红影

马黑黑 发表于 2023-2-28 07:58
思考：如果小球背景色设置为全透明（background: transparent），会得出什么效果？

那就只剩阴影在闪了？

红影

马黑黑 发表于 2023-2-28 08:07
这个播放控制器闪动效果，猛一看，像是响应音频的东东，其实不是哈。它只是闪动频率偏快，与音乐节拍貌似能 ...

按照随机数 ${Math.random()}s来说，套用的时候，好像也需选用快节奏音乐呢。
你这个音乐跟这个闪动效果配合得特别好

红影

马黑黑 发表于 2023-2-28 07:56
播放控制器效果说明：

小球由类名为 ball 的CSS选择器 .ball 设置样式，它们宽高 20*20，彼此间间隔 2px ...

看看内外阴影数字不大啊，效果上看觉得阴影很长啊

红影

红影 发表于 2023-2-28 09:31
看看内外阴影数字不大啊，效果上看觉得阴影很长啊

看错了，@keyframes里的设置还是挺大的

马黑黑

红影 发表于 2023-2-28 09:31
看看内外阴影数字不大啊，效果上看觉得阴影很长啊

它们串起来的

马黑黑

庶民 发表于 2023-2-28 08:29
这样的背景音乐，很感兴趣。

清朗纯净

马黑黑

红影 发表于 2023-2-28 09:43
看错了，@keyframes里的设置还是挺大的

也没多大，一般大

马黑黑

红影 发表于 2023-2-28 09:21
按照随机数 ${Math.random()}s来说，套用的时候，好像也需选用快节奏音乐呢。
你这个音乐跟这个闪动效果 ...

可以通过对计算的设计进行调节。也可以有 audio 标签的 timeupdate 事件控制运动频率（不使用关键帧动画）

马黑黑

红影 发表于 2023-2-28 09:18
那就只剩阴影在闪了？

动画的内容只有 @keyframes 里的阴影，其他的，如初始阴影，背景色，是静态的。初始阴影会被大阴影覆盖，背景色则因元素的 opacity 以及 @keyframes 里的内阴影而受到影响。

马黑黑

醉美水芙蓉 发表于 2023-2-28 11:57
欣赏老师佳作！

中午好

绿叶清舟

象电报了

马黑黑

绿叶清舟 发表于 2023-2-28 12:13
象电报了

打给谁呢