酹江月

马黑黑

马黑黑

非响应式脚链播放器插件。帖子代码：

1. <style>
   
2.         #papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/lwjlyt.webp') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
   
3.         .meteor { position: absolute; width: 2px; height: 2px; background: linear-gradient(to right, transparent, lightblue); transform: rotate(30deg); animation: fall var(--du) var(--delay) infinite linear; }
   
4.         @keyframes fall { to { transform: translate(100px,100px) rotate(40deg); width: var(--ww); opacity: 0; } }
   
5. </style>
   
6. 
   
7. <div id="papa"><span class="meteor"></span></div>
   
8. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1357056838" autoplay loop></audio>
   
9. 
   
10. <script>
    
11.        
    
12. (function() {
    
13.         let script = document.createElement('script');
    
14.         script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
    
15.         script.charset = 'utf-8';
    
16.         document.head.appendChild(script);
    
17.         let geci = [ [1,"酹江月",4], [6,"",1] ];
    
18.         script.onload = () => {
    
19.                 HCPlayer({
    
20.                         papa: '#papa',
    
21.                         lrcAr: geci,
    
22.                         lrc_css: 'top: 20px; color: lightblue; --bg: linear-gradient(rgba(240,240,180,.2),rgba(240,240,180,.4));',
    
23.                         fs_css: 'top: 100px; color: #ddd; background: #000;',
    
24.                         player_css: `
    
25.                                 bottom: 30px;
    
26.                                 border-width: 0;
    
27.                                 color: #fff;
    
28.                                 --size: 240px;
    
29.                                 --bRad: 50%;
    
30.                                 --track: gray;
    
31.                                 --prog: lightblue;
    
32.                                 --btnBg: linear-gradient(orange, snow);
    
33.                         `,
    
34.                         lizi: { color1: 'lightyellow', color2: 'silver' },
    
35.                 });
    
36.         };
    
37.         [...new Array(40).keys()].forEach((e,k) => {
    
38.                 e = document.createElement('span');
    
39.                 e.className = 'meteor';
    
40.                 e.style.cssText += `
    
41.                         left: ${100 * Math.random()}%;
    
42.                         top: ${20 * Math.random()}%;
    
43.                         --du: ${6 + Math.random() * 4}s;
    
44.                         --delay: -${Math.random() * 6}s;
    
45.                         --ww: ${50 + Math.random() * 50}px;
    
46.                 `;
    
47.                 papa.appendChild(e);
    
48.         });
    
49. })();
    
50. 
    
51. </script>
    

复制代码

马黑黑

插件珠子律动的模拟，采用：

    请求关键帧动画 requestAnimationFrame 实现。速度会非常之快，所以通过 transition: .17s; 对之设限（也可通过算法优雅降频）。

显然，这与响应式的律动效果无法比拟，姑且玩玩吧。

马黑黑

流星的实现：

.meteor 选择器 设定了流星的基本样式——

.meteor {
        position: absolute;
        width: 2px;
        height: 2px;
        background: linear-gradient(to right, transparent, lightblue);
        transform: rotate(30deg);
        animation: fall var(--du) var(--delay) infinite linear;
}

利用子元素背景色 浅蓝色+透明 渐变模拟拖尾效果。2*2的尺寸能有什么拖尾？别急，还有CSS关键帧动画——

@keyframes fall {
        to {
                transform: translate(100px,100px) rotate(40deg);
                width: var(--ww);
                opacity: 0;
        }
}

CSS变量 --ww 会重新设定流星的宽度，每一个流星宽度尺寸将从 2px 变到 --ww 规定的尺寸，最后消失重来。--ww 的赋值，由JS随机给出——

        [...new Array(40).keys()].forEach((e,k) => {
                e = document.createElement('span');
                e.className = 'meteor';
                e.style.cssText += `
                        left: ${100 * Math.random()}%;
                        top: ${20 * Math.random()}%;
                        --du: ${6 + Math.random() * 4}s;
                        --delay: -${Math.random() * 6}s;
                        --ww: ${50 + Math.random() * 50}px;
                `;
                papa.appendChild(e);
        });

40颗流星，在它们消失前的最大宽度可能是 99.999... px，不过它们还没长到身子最长的时候就消失了，然后重生、再重复新的生命历程。

马黑黑

全屏观赏帖子，流星还是均匀分布在帖子上部。原因在于，JS在初始化流星的初始位置时，使用的是百分比而不是px像素做 left 和 top 的赋值单位。

用什么单位做赋值单位是一门学问，三言两语难以说清。一句话概括：一切根据需要来。

红影

好漂亮的代码制作的流星，在这个背景上太美了

红影

马黑黑 发表于 2023-9-2 08:58
全屏观赏帖子，流星还是均匀分布在帖子上部。原因在于，JS在初始化流星的初始位置时，使用的是百分比而不是 ...

要全屏的时候，当然要百分比设置位置了，这样在改变底图大小的时候，位置可以不受影响呢。
黑黑把这个百分比设置到JS里了，厉害

红影

还以为之前的响应式频谱换成了圆球的珠珠，原来不是响应的，倒也和响应式非常相似呢，很赞

红影

又是一个新的效果呢，不用去上传音乐就能做了，太好了

红影

珠子律动效果，嗯嗯，可以作为这个新效果的名称了呢

马黑黑

红影 发表于 2023-9-2 10:15
好漂亮的代码制作的流星，在这个背景上太美了

这和用JS类做的雨原理一致，只是这里不用类。

马黑黑

红影 发表于 2023-9-2 10:17
要全屏的时候，当然要百分比设置位置了，这样在改变底图大小的时候，位置可以不受影响呢。
黑黑把这个百 ...

因为要随机分布，纯粹的CSS做不了，只能交给JS

马黑黑

红影 发表于 2023-9-2 10:19
又是一个新的效果呢，不用去上传音乐就能做了，太好了

不过它不是响应的，律动的节拍与音频声波信息无关，是另一套系统

马黑黑

红影 发表于 2023-9-2 10:20
珠子律动效果，嗯嗯，可以作为这个新效果的名称了呢

没有，就叫脚链。上帝在亚当犯了错之后曾对亚当说过，善待你的脚，就是对我对你的尊重。

焱鑫磊

欣赏老师佳作！

马黑黑

焱鑫磊 发表于 2023-9-2 12:28
欣赏老师佳作！

下午好

马黑黑

醉美水芙蓉 发表于 2023-9-2 12:11
不错！老师设计漂亮！

红影

马黑黑 发表于 2023-9-2 10:46
这和用JS类做的雨原理一致，只是这里不用类。

嗯嗯，那个也很漂亮的

红影

马黑黑 发表于 2023-9-2 10:50
因为要随机分布，纯粹的CSS做不了，只能交给JS

是的，在计算方面JS很厉害