Various Artists-Tremble
本帖最后由 马黑黑 于 2025-9-1 13:06 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w5/ground.webp') no-repeat center/cover; --ma-size: 20%; }
#btnFs { right: 30px; bottom: 30px; color: lightblue; border-color: currentColor!important; }
.ball { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: lightblue; offset-path: ellipse(45%40%); animation: move 20s var(--delay) linear infinite var(--state); }
@keyframes move { 100% { offset-distance: 100%; } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1877571716" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.mp4" autoplay loop muted></video>
<div id="ma" class="brightness">
<svg width="100%" height="100%" viewBox="-200 -200 400 400">
<path d="M -15 0 L -40 -190 Q 0 -25 40 -190 L 15 0 Q 0 -50 -15 0 M -4.635 -14.266 L 168.34 -96.755 Q 23.776 -7.725 193.061 -20.671 L 4.635 14.266 Q 47.553 -15.451 -4.635 -14.266 M 12.135 -8.817 L 144.04 130.202 Q 14.695 20.225 79.319 177.225 L -12.135 8.817 Q 29.389 40.451 12.135 -8.817 M 12.135 8.817 L -79.319 177.225 Q -14.695 20.225 -144.04 130.202 L -12.135 -8.817 Q -29.389 40.451 12.135 8.817 M -4.635 14.266 L -193.061 -20.671 Q -23.776 -7.725 -168.34 -96.755 L 4.635 -14.266 Q -47.553 -15.451 -4.635 14.266 Z" fill="#5585c1" stroke="orange">
</svg>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa,ma);
var total = 20, fragment = document.createDocumentFragment();
Array.from({length: total}).forEach((d,k) => {
d = document.createElement('div');
d.classList.add('ball');
d.style.setProperty('--delay', -20 / total * k + 's');
fragment.appendChild(d);
});
pa.appendChild(fragment);
</script> 本帖最后由 马黑黑 于 2025-9-1 13:06 编辑
帖子代码：
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w5/ground.webp') no-repeat center/cover; --ma-size: 20%; }
#btnFs { right: 30px; bottom: 30px; color: lightblue; border-color: currentColor!important; }
.ball { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: lightblue; offset-path: ellipse(45%40%); animation: move 20s var(--delay) linear infinite var(--state); }
@keyframes move { 100% { offset-distance: 100%; } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1877571716" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f3c0b41744.mp4" autoplay loop muted></video>
<div id="ma" class="brightness">
<svg width="100%" height="100%" viewBox="-200 -200 400 400">
<path d="M -15 0 L -40 -190 Q 0 -25 40 -190 L 15 0 Q 0 -50 -15 0 M -4.635 -14.266 L 168.34 -96.755 Q 23.776 -7.725 193.061 -20.671 L 4.635 14.266 Q 47.553 -15.451 -4.635 -14.266 M 12.135 -8.817 L 144.04 130.202 Q 14.695 20.225 79.319 177.225 L -12.135 8.817 Q 29.389 40.451 12.135 -8.817 M 12.135 8.817 L -79.319 177.225 Q -14.695 20.225 -144.04 130.202 L -12.135 -8.817 Q -29.389 40.451 12.135 8.817 M -4.635 14.266 L -193.061 -20.671 Q -23.776 -7.725 -168.34 -96.755 L 4.635 -14.266 Q -47.553 -15.451 -4.635 14.266 Z" fill="#5585c1" stroke="orange">
</svg>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa,ma);
var total = 20, fragment = document.createDocumentFragment();
Array.from({length: total}).forEach((d,k) => {
d = document.createElement('div');
d.classList.add('ball');
d.style.setProperty('--delay', -20 / total * k + 's');
fragment.appendChild(d);
});
pa.appendChild(fragment);
</script>
本帖最后由 马黑黑 于 2025-9-1 13:07 编辑
本帖演示：
（一）直接使用旋转而成的SVG路径做小播的外观，路径应用于 svg 标签，svg标签作为 ma 的子元素。代码在 12~17 行；
（二）使用svg形状作为小球运动的相抵路径即 offset-path 属性值，这个我们此前一直未尝试过。这里用了椭圆 ellipse，用百分比表示椭圆的两个半径可以令路径自适配帖子窗口的尺寸（包括动态改变的尺寸）。代码在 05 行，两个半径用空格隔开，第一个半径是基于宽度的半径，取帖子容器宽度的 45%，第二个半径是基于高度的半径，取帖子容器高度的 40%。
【注】ellipse 和 circle 一样， 可以通过关键词 at 指定圆心，缺省在帖子容器的中央。 本帖最后由 马黑黑 于 2025-9-1 13:14 编辑
小球均匀分布的小技巧：
本帖利用 animation 动画属性的延时参数 animation-delay 令每一个小球提前一定时间运行动画，从而达到小球均匀分布于椭圆圆周之上。具体计算公式：
动画时长 / 小球总数 * 小球序号
小球原本没有序号，JS在动态创建小球之时，每创建一个它都会自然拥有一个顺序号，我们将其记为 k，k 从 0 开始。具体代码参考 23~30 行。
创建小球时，帖子使用了一个之前极少用到的文档碎片机制，即，先创建一个文档碎片，document.createDocumentFragment()，记为 fragment，然后所有的小球创建都追加给它，完了才将碎片追加给 pa 帖子容器。这么做的意义是减少DOM多次写入，仅写一次，可以提升性能。之前之所以不怎么用，主要是觉得动态生成的元素个数都不会太多，性能消耗可以忽略不计。 这个环形运动的小球的创建也太简洁了，只要给个椭圆长短轴，然后给出延时参数就能得到小球动画了，太神奇了{:4_187:} d.style.setProperty('--delay', -20 / total * k + 's');
这里的数值-20的取法和小球的时间相关，数值太大，出现小球的个数变少，数值太小，小球无法布满整个路径。
文档碎片这个从来没听过呢，学习了{:4_187:} 小播使用了完整路径，这个是那个路径制作的实例演示呢。
制作真漂亮{:4_187:} 真漂亮，谢谢老师的精彩分享。{:4_187:} 红影 发表于 2025-9-1 13:34
小播使用了完整路径，这个是那个路径制作的实例演示呢。
制作真漂亮
需要svg完整标签 梦江南 发表于 2025-9-1 15:47
真漂亮，谢谢老师的精彩分享。
{:4_190:} 红影 发表于 2025-9-1 13:22
这个环形运动的小球的创建也太简洁了，只要给个椭圆长短轴，然后给出延时参数就能得到小球动画了，太神奇了 ...
只是，使用svg基本图像形状做路径有兼容性问题：chrome 106 及以上的版本才支持，到目前止果系浏览器尚未支持。 红影 发表于 2025-9-1 13:30
d.style.setProperty('--delay', -20 / total * k + 's');
这里的数值-20的取法和小球的时间相关，数值 ...
二楼的算式讲的很清楚。至于文档碎片，这个再追加很多很多元素的时候有用 音画好棒 感谢马黑黑带来的精彩，辛苦了。 祝你幸福吉祥 偶然~ 发表于 2025-9-1 19:10
音画好棒
{:4_191:} 这个作品十分清爽，瓦蓝瓦蓝的天，有一圈小球随着小播在运动。。
好大气的画面。。 花飞飞 发表于 2025-9-1 20:45
这个作品十分清爽，瓦蓝瓦蓝的天，有一圈小球随着小播在运动。。
好大气的画面。。
主要是温馨 马黑黑 发表于 2025-9-1 18:20
需要svg完整标签
知道了。其实这个完整标签也好，可以复习一下以前学的了{:4_173:} 马黑黑 发表于 2025-9-1 18:22
只是，使用svg基本图像形状做路径有兼容性问题：chrome 106 及以上的版本才支持，到目前止果系浏览器尚未 ...
原来这个叫做用svg基本图像形状做路径，这个还有兼容问题啊。嗯嗯，知道了。，