酹江月

马黑黑 发表于 2023-9-2 08:33

马黑黑 发表于 2023-9-2 08:35

非响应式脚链播放器插件。帖子代码：
<style>
#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; }
.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; }
@keyframes fall { to { transform: translate(100px,100px) rotate(40deg); width: var(--ww); opacity: 0; } }
</style>

<div id="papa"><span class="meteor"></span></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1357056838" autoplay loop></audio>

<script>

(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [ , ];
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: 'top: 20px; color: lightblue; --bg: linear-gradient(rgba(240,240,180,.2),rgba(240,240,180,.4));',
fs_css: 'top: 100px; color: #ddd; background: #000;',
player_css: `
bottom: 30px;
border-width: 0;
color: #fff;
--size: 240px;
--bRad: 50%;
--track: gray;
--prog: lightblue;
--btnBg: linear-gradient(orange, snow);
`,
lizi: { color1: 'lightyellow', color2: 'silver' },
});
};
[...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);
});
})();

</script>

马黑黑 发表于 2023-9-2 08:41

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

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

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

马黑黑 发表于 2023-9-2 08:52

本帖最后由马黑黑于 2023-9-2 08:54 编辑

流星的实现：

.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，不过它们还没长到身子最长的时候就消失了，然后重生、再重复新的生命历程。

马黑黑 发表于 2023-9-2 08:58

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

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

红影发表于 2023-9-2 10:15

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

红影发表于 2023-9-2 10:17

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

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

红影发表于 2023-9-2 10:18

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

红影发表于 2023-9-2 10:19

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

红影发表于 2023-9-2 10:20

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

马黑黑 发表于 2023-9-2 10:46

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

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

马黑黑 发表于 2023-9-2 10:50

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

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

马黑黑 发表于 2023-9-2 10:51

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

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

马黑黑 发表于 2023-9-2 10:52

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

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

醉美水芙蓉 发表于 2023-9-2 12:11

焱鑫磊 发表于 2023-9-2 12:28

欣赏老师佳作！{:4_187:}

马黑黑 发表于 2023-9-2 12:43

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

下午好

马黑黑 发表于 2023-9-2 12:43

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

{:4_190:}

红影发表于 2023-9-2 14:05

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

嗯嗯，那个也很漂亮的{:4_204:}

红影发表于 2023-9-2 14:06

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

是的，在计算方面JS很厉害{:4_204:}

页: [1] 2

花潮论坛's Archiver

酹江月