[特效音画] 寂

马黑黑 · 发表于 2025-7-14 18:30

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2025-7-14 18:31

帖子代码

<style>
#papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://638183.freep.cn/638183/t24/6/151.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; --r: 2vw; --size: 10vw; }
#btnFs { bottom: 20px; color: white; }
#vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .75; pointer-events: none; }
#player { --size: 30vw; position: absolute; top: 10%; width: var(--size); height: var(--size); filter: drop-shadow(-4px -4px 12px gray); cursor: pointer; pointer-events: none; perspective: 600px; perspective-origin: 0 0; transform-style: preserve-3d; }
#player::before, #player::after { position: absolute; content: ''; left: 30%; top: calc(50% - 80px); width: 160px; height: 160px; background: url('https://638183.freep.cn/638183/small/mlh.png') no-repeat center/cover; pointer-events: auto; transform: rotateX(-15deg) rotateZ(calc(-1 * var(--deg))); }
#player::after { left: 70%; z-index: -1; }
li-zi { position: absolute; width: 60px; height: 60px; background: url('https://638183.freep.cn/638183/small/mlh.png') no-repeat center/cover; transform: rotateY(var(--deg)) translate3d(0, var(--y), var(--r)) rotateY(calc(-1 * var(--deg))) rotateZ(var(--deg)); pointer-events: auto; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2122459466" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/20/05/00/video6364ffecb011e.mp4" autoplay loop muted></video>
<div id="player" title="播放/暂停"></div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(papa, player);
var lzAr = [], total = 100, step = 0.15, rtime;
createLZ(player, total, 30);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onplaying = aud.onpause = () => rState();
function createLZ(parent, num, size) {
Array.from({length: num}).forEach((lz,idx) => {
lz = document.createElement('li-zi');
var angle = 360 / num * idx;
var r = (player.clientWidth - size) / 2 + size / 2;
lz.style.cssText += `
width: ${size}px;
height: ${size}px;
left: calc(50% - ${size / 2}px);
top: 20%; //calc(50% - ${size / 2}px);
filter: hue-rotate(${Math.random() * 360}deg);
--y: ${Math.random() * 100}px;
--deg: ${angle}deg;
--r: ${r}px;
`;
lzAr.push({elm: lz, a: angle});
parent.appendChild(lz);
});
lzAr.push({elm: player, a: 0});
}
function animate() {
cancelAnimationFrame(rtime);
rtime = requestAnimationFrame(animate);
lzAr.forEach(obj => {
obj.elm.style.setProperty('--deg', obj.a + 'deg');
obj.a = (obj.a - step) % 360;
});
}
function rState() {
aud.paused ? cancelAnimationFrame(rtime) : animate();
}
</script>

复制代码

马黑黑 · 发表于 2025-7-14 20:21

粒子绕圈运动原理请参阅：

多个例子绕圈圈演示 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

当然，本帖是3d效果，情况回避上例复杂得多，但基本原理一致。

马黑黑 · 发表于 2025-7-14 20:26

如果希望粒子的自转速度快一些，可以考虑：

li-zi {
transform: rotateY(var(--deg)) translate3d(0, var(--y), var(--r)) rotateY(calc(-1 * var(--deg))) rotateZ(calc(var(--deg) * 3));
}

乘以 3 还嫌慢可以加大。效果：寂