世中逢尔雨逢花

马黑黑

马黑黑

<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>

花飞飞

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

花飞飞

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

马黑黑

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

小播会七十二变

马黑黑

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

研究入手：

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

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

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

花飞飞

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

这是个进了封神榜的小播

花飞飞

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

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

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

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

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

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

杨帆

好听好看，谢谢马老师精彩分享

花飞飞

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

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

马黑黑

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

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

谢谢

马黑黑

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

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

不错

马黑黑

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

马黑黑

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

是的吧

花飞飞

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

谢谢你的这个作品，看出了不一样的好东西

花飞飞

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

被表扬了就乐一个

花飞飞

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

有时候善变是好的。

马黑黑

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

听说过

马黑黑

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

应该的

马黑黑

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

其实也差不多