寂 - 动画音画 - 花潮论坛 - Powered by Discuz! Archiver

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

寂

马黑黑 发表于 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 还嫌慢可以加大。效果：寂

红影发表于 2025-7-14 22:03

马黑黑发表于 2025-7-14 20:26
如果希望粒子的自转速度快一些，可以考虑：

li-zi {

速度这个看懂了，其他的还有点迷糊，喝酒回来，脑子不够用，明天再仔细看看{:4_187:}

红影发表于 2025-7-14 22:08

才发现，粒子和小播的图图是一样的{:4_173:}

马黑黑 发表于 2025-7-14 22:09

红影发表于 2025-7-14 22:03
速度这个看懂了，其他的还有点迷糊，喝酒回来，脑子不够用，明天再仔细看看

迷迷糊糊最幸福

红影发表于 2025-7-14 22:09

晕晕乎乎的，先撤了{:4_193:}

杨帆发表于 2025-7-14 23:10

漂亮！谢谢马老师精彩分享{:4_190:}

红影发表于 2025-7-15 12:53

马黑黑发表于 2025-7-14 22:09
迷迷糊糊最幸福

不幸福啊，第二天都不舒服{:4_173:}

马黑黑 发表于 2025-7-15 18:03

红影发表于 2025-7-15 12:53
不幸福啊，第二天都不舒服

头疼

马黑黑 发表于 2025-7-15 18:03

杨帆发表于 2025-7-14 23:10
漂亮！谢谢马老师精彩分享

{:4_191:}

红影发表于 2025-7-15 20:17

马黑黑发表于 2025-7-15 18:03
头疼

而且还感冒了，昨天去别人的单位，空调开得有点低了。

马黑黑 发表于 2025-7-15 21:01

红影发表于 2025-7-15 20:17
而且还感冒了，昨天去别人的单位，空调开得有点低了。

身体耐受力差了

红影发表于 2025-7-15 22:13

马黑黑发表于 2025-7-15 21:01
身体耐受力差了

是啊，弄得我一天都不舒服。

马黑黑 发表于 2025-7-15 22:39

红影发表于 2025-7-15 22:13
是啊，弄得我一天都不舒服。

需要加强锻炼了

红影发表于 2025-7-16 10:31

马黑黑发表于 2025-7-15 22:39
需要加强锻炼了

嗯嗯，你说得有道理，体质必须加强才行。

页: [1]

花潮论坛's Archiver

寂