Roc Wieler - Mendre - 动画音画 - 花潮论坛

马黑黑 发表于 2025-7-19 13:01

Roc Wieler - Mendre

马黑黑 发表于 2025-7-19 13:01

代码

<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/w4/mendre.webp') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; }
#player { position: absolute; bottom: 100px; aspect-ratio: 1/1; width: 16%; transform-style: preserve-3d; cursor: pointer; border-radius: 50%; background: radial-gradient(lightgreen, transparent); }
.ring { position: absolute; width: 100%; height: 100%; border: 1px solid var(--cc); border-radius: 50%; transform: translateZ(-30px) rotateY(var(--ay)) rotateX(var(--ax)); }
#btnFs { bottom: 20px; color: #eee; }
.vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .8; pointer-events: none; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1477945936" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/24/12/36/49/video67e0e161531bc.mp4" autoplay loop muted></video>
<div id="player"></div>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(papa, player);

var total = 20, rings = [], raf;
Array.from({length: total}).forEach( (d,k) => {
d = document.createElement('div');
d.className = 'ring';
const a = k * 360 / total;
d.style.cssText += `
--ax: ${a}deg;
--ay:${a}deg;
--cc: #${Math.random().toString(16).substring(2,8)};
`;
rings.push({ elm: d, a: a });
player.appendChild(d);
});

const animate = () => {
cancelAnimationFrame(raf);
rings.forEach( (d, k) => {
d.a = (d.a + 1) % 360;
d.elm.style.setProperty('--ax', d.a + 'deg');
d.elm.style.setProperty('--ay', d.a + 'deg');
});
raf = requestAnimationFrame(animate);
};

aud.onplaying = aud.onpause = () => aud.paused ? cancelAnimationFrame(raf) : animate();
</script>

花飞飞 发表于 2025-7-19 16:29

进来就看到跟网站里不一样的制作，细的实线条也很漂亮～这个转动速度感觉更快一点～

花飞飞 发表于 2025-7-19 16:32

我这会是来打个酱油的，攒了不少分来花一花～{:4_170:}
忙去了哈

杨帆发表于 2025-7-19 17:25

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

马黑黑 发表于 2025-7-19 17:37

杨帆发表于 2025-7-19 17:25
漂亮！谢谢马老师精彩分享

{:4_191:}

马黑黑 发表于 2025-7-19 17:38

花飞飞发表于 2025-7-19 16:32
我这会是来打个酱油的，攒了不少分来花一花～
忙去了哈

{:4_190:}

马黑黑 发表于 2025-7-19 17:39

花飞飞发表于 2025-7-19 16:29
进来就看到跟网站里不一样的制作，细的实线条也很漂亮～这个转动速度感觉更快一点～

快慢看 animate 函数动画里角度加多少，这里加 1，加０.x 比较合适

朵拉发表于 2025-7-19 20:19

动感音乐，漂亮效果{:4_178:}

朵拉发表于 2025-7-19 20:19

老师好，学生已交作业，请您指正{:4_190:}

红影发表于 2025-7-19 20:30

这个线条的圆环小播很漂亮，转得很迷幻{:4_187:}

红影发表于 2025-7-19 20:32

d = document.createElement('div');后面的都是介于这个产生的吧{:4_204:}

马黑黑 发表于 2025-7-19 20:37

朵拉发表于 2025-7-19 20:19
动感音乐，漂亮效果

{:4_191:}

马黑黑 发表于 2025-7-19 20:37

朵拉发表于 2025-7-19 20:19
老师好，学生已交作业，请您指正

{:4_199:}

马黑黑 发表于 2025-7-19 20:38

红影发表于 2025-7-19 20:30
这个线条的圆环小播很漂亮，转得很迷幻

命名为魔幻球{:4_170:}

马黑黑 发表于 2025-7-19 20:41

红影发表于 2025-7-19 20:32
d = document.createElement('div');后面的都是介于这个产生的吧

d 变量时 forEach 里的参数，它原本指向数组元素，这里借用该变量名转成要创建的 div 元素，d从此就是正在创建的 div，然后给它指定class，给它设置相应的CSS变量值（必要时还可以创建属性和属性值），最后添加到 player 容器。

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

马黑黑发表于 2025-7-19 20:38
命名为魔幻球

嗯嗯，很贴切{:4_173:}

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

马黑黑发表于 2025-7-19 20:41
d 变量时 forEach 里的参数，它原本指向数组元素，这里借用该变量名转成要创建的 div 元素，d从此就是正 ...

添加好了， player 里想要的就有了。

马黑黑 发表于 2025-7-19 23:43

红影发表于 2025-7-19 22:15
添加好了， player 里想要的就有了。

创建多个元素，可以使用循环语句，常用的是 for 语句。比如要创建五个 div 元素，先声明一个变量，var total = 5，然后用 for 循环创建元素，并添加到 id="papa" 的容器元素中：

for (var k = 0; k < total; K++) {
var div = document.createElement('div');
div.className = 'ring';
div.style.cssText += `
   width: 120px;
   height: 80px;
   left: ${K * 120 + 20}px;
`;
div.innerText = k + 1;
papa.appendChild(div);
}

for 语句里面，先创建循环流程，放在小括号里，(...) 里有三个部分：其一，var k = 0; k 是步进变量，从 0 开始，也可以从你愿意的数字开始，看情况而定；其二，限制 k 的范围，k < total; ，k 小于前面声明的总数值，这个式子也同样根据需要设置，比如小于等于或大于、大于等于，要设置得当，不然会死循环——就是永远达不到那个阈值，就在这里一直干下去跳不出来；其三，不仅方式，k ++，等价于 k = K +1，也可以自定义步进方式，例如 k = K + 2，或者，k --（等价于 K = k - 1），何种方式必须配套前面的设计，必须避免死循环的发生（例如，设计了 k 从10 开始、 K > 5，却使用 k ++ 做步进方式，酱紫，k的值永远大于5，就永远无法到达阈值，这个循环就跳不出来）。

然后是花括号 {...}，里面的内容是每一个循环过程要做的事情。上例，先使用JS内置的方法 document.createElement('元素名称') 的方法创建一个 div 元素并复制给自定义变量 div，就这给 div 指定CSS类名以便使用选择器 .ring { ... } 的相关设置，下来是额外设置一些CSS属性，使用的是JS内置属性设置方法元素.style.cssText，下来则是给每一个元素指定文本 k+1，序号，最后将 div 追加给 papa 容器元素。

帖子创建圆环时用的是 forEach 循环，还有其它的方法。具体使用哪一种方法视各人习惯、语句的执行性能以及上下文环境等因素而定，并没有死规定。for循环执行速度可能是最好的，并且，它可以主动跳出或忽略一些情形，相对灵活。

马黑黑 发表于 2025-7-19 23:43

红影发表于 2025-7-19 22:13
嗯嗯，很贴切

还好

页: [1] 2

花潮论坛's Archiver

Roc Wieler - Mendre