世中逢尔雨逢花

马黑黑 发表于 2025-9-3 18:03

马黑黑 发表于 2025-9-3 18:03

<div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w4/93.webp') no-repeat center/cover; --ma-size: 12%; }
#ma { left: 30px; top: 30px; background: url('https://638183.freep.cn/638183/web/svg/pl-white.svg') no-repeat center/cover; }
#btnFs { right: 30px; bottom: 30px; color: lightblue; border-color: currentColor!important; }
#svg use { opacity: 1; animation: flash 0.5s var(--delay) infinite alternate var(--state); }
@keyframes flash { to { opacity: 0.5; transform: rotate(360deg); } }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1298804351" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d0445e4511e.mp4" autoplay loop muted></video>
<div id="ma" class="brightness"></div>
<svg id="svg" width="100%" height="100%" viewBox="0 0 1600 900">
<defs>
<g id="svgShape">
<image x="0" y="0" width="30" height="30" href="https://638183.freep.cn/638183/web/svg/pl-white.svg" />
</g>
<path id="motionPath" d="M400 0 L600 1000" />
</defs>
</svg>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
var setting = { svg: svg, lz: 20, dur: 12, gap: 600 };
FS(pa, ma, setting);
</script>
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

花飞飞 发表于 2025-9-3 18:36

本来看粒子，色彩和颜色还有外形一朵一朵半透明，有点像蒲公英花的造型，仔细一看是小播变的。。{:4_173:}

花飞飞 发表于 2025-9-3 18:43

<path id="motionPath" d="M400 0 L600 1000" />这个粒子的路径可以理解从上往右下，但是每个粒子在过程中那个突然变大又横移的动态效果是怎么来了，瞅了半天{:4_173:}等会再来看看

马黑黑 发表于 2025-9-3 19:15

花飞飞发表于 2025-9-3 18:36
本来看粒子，色彩和颜色还有外形一朵一朵半透明，有点像蒲公英花的造型，仔细一看是小播变的。。

小播会七十二变{:4_170:}

马黑黑 发表于 2025-9-3 19:24

花飞飞发表于 2025-9-3 18:43
这个粒子的路径可以理解从上往右下，但是每个粒子在过程中那个突然变大又横移的动态效果是怎么来了，瞅了 ...

研究入手：

（一）@keyframes 动画设计，除了改变 opacity 属性，还有些 transform 转换动画的 rotate 旋转；

（二）坐标系问题。svg 的 viewBox 是 0 01600 900，坐标系的原点在 {0,0} 即 svg 矩形左上角这个点之上，这意味着其内元素的旋转不是绕元素中心旋转，而是 svg 矩形的左上角 {0,0}，这样，其内元素的每一个转动都附带这位移；

（三）svg 内部子元素在 path 路径上的初始形态问题。模块设计了子元素 rotate 为 auto，正如在前两个帖子看到的坦克和火箭效果那样，它们的朝向这是适配路径的，就是说，它们已经有一定的旋转初始角度，在此基础上，每一个子元素执行 @keyframes 的 transform: rotate(360deg) 的真正旋转角度就不都是 360度，要减去它自己初始状态的旋转角度，因此有的“花“不怎么旋转，有得旋转较大，不怎么旋转的位移幅度小，反之大。

花飞飞 发表于 2025-9-3 19:50

马黑黑发表于 2025-9-3 19:15
小播会七十二变

这是个进了封神榜的小播{:4_173:}

花飞飞 发表于 2025-9-3 19:58

马黑黑发表于 2025-9-3 19:24
研究入手：

（一）@keyframes 动画设计，除了改变 opacity 属性，还有些 transform 转换动画的 rotate ...

使劲看了看，原来粒子是在两股力量的作用之下出现的诡异路径{:4_173:}

这里时间设为0.5几乎看不到转动，我把它改成2，角度改为180，有点些体会了。。再结合你说的中心点在左上方，用力脑补中{:4_173:}

大小应该是在封包里的scale: 1.5, // 粒子伸缩（浮点数，缺省随机变化）

艾玛，边看你的说明，边自己实验，总算是能跟上点节奏了。。

杨帆发表于 2025-9-3 20:02

好听好看，谢谢马老师精彩分享{:4_191:}

花飞飞 发表于 2025-9-3 20:03

这神奇的动态加上来，真是没想到的效果，令人大开眼界。。

白老师很少用这样的氛围感图片，这个画面有故事感，电影大片一样，特别好看。。
音乐时而舒缓时而激昂，与众不同{:4_173:}

马黑黑 发表于 2025-9-3 20:15

花飞飞发表于 2025-9-3 20:03
这神奇的动态加上来，真是没想到的效果，令人大开眼界。。

白老师很少用这样的氛围感图片，这个画面有故 ...

谢谢

马黑黑 发表于 2025-9-3 20:16

花飞飞发表于 2025-9-3 19:58
使劲看了看，原来粒子是在两股力量的作用之下出现的诡异路径

这里时间设为0.5几乎看不到转动 ...

不错

马黑黑 发表于 2025-9-3 20:16

杨帆发表于 2025-9-3 20:02
好听好看，谢谢马老师精彩分享

{:4_190:}

马黑黑 发表于 2025-9-3 20:16

花飞飞发表于 2025-9-3 19:50
这是个进了封神榜的小播

是的吧

花飞飞 发表于 2025-9-3 20:23

马黑黑发表于 2025-9-3 20:15
谢谢

谢谢你的这个作品，看出了不一样的好东西{:4_181:}

花飞飞 发表于 2025-9-3 20:23

马黑黑发表于 2025-9-3 20:16
不错

{:4_205:}被表扬了就乐一个

花飞飞 发表于 2025-9-3 20:24

马黑黑发表于 2025-9-3 20:16
是的吧

有时候善变是好的。{:4_173:}

马黑黑 发表于 2025-9-3 20:43

花飞飞发表于 2025-9-3 20:24
有时候善变是好的。

听说过

马黑黑 发表于 2025-9-3 20:43

花飞飞发表于 2025-9-3 20:23
被表扬了就乐一个

应该的

马黑黑 发表于 2025-9-3 20:43

花飞飞发表于 2025-9-3 20:23
谢谢你的这个作品，看出了不一样的好东西

其实也差不多

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

世中逢尔雨逢花