陨落之翼
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w4/92.webp') no-repeat center/cover; --ma-size: 15%; }
#ma { right: 20px; bottom: 20px; background: url('https://638183.freep.cn/638183/small/ying.png') no-repeat center/cover; }
#btnFs { left: 30px; bottom: 20px; color: #eee; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28465302" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/05/72/00/64a6342d05933.mp4" autoplay loop muted></video>
<div id="ma" class="brightness"></div>
<svg id="svg" width="100%" height="100%" viewBox="0 00 1600 900">
<defs>
<g id="svgShape" fill="white" stroke="snow">
<image x="0" y="0" width="70" height="70" href="https://638183.freep.cn/638183/small/2025/featherjpg.png" />
</g>
<path id="motionPath" d="M60 -200 L800 1200" />
</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);
var uses = svg.querySelectorAll('use');
uses.forEach(u => u.style.setProperty('filter', `hue-rotate(${Math.random() * 360}deg)`));
</script> 从小播到背景到粒子，都紧扣翅膀的主题，这个制作太赞了{:4_199:} 本帖最后由 马黑黑 于 2025-9-2 22:35 编辑 <br /><br /><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/92.webp') no-repeat center/cover; --ma-size: 15%; }
#ma { right: 20px; bottom: 20px; background: url('https://638183.freep.cn/638183/small/ying.png') no-repeat center/cover; }
#btnFs { left: 30px; bottom: 20px; color: #eee; border-color: currentColor!important; }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28465302" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/05/72/00/64a6342d05933.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" fill="white" stroke="snow">
<image x="0" y="0" width="70" height="70" href="https://638183.freep.cn/638183/small/2025/featherjpg.png" />
</g>
<path id="motionPath" d="M60 -200 L800 1200" />
</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);
var uses = svg.querySelectorAll('use');
uses.forEach(u => u.style.setProperty('filter', `hue-rotate(${Math.random() * 360}deg)`));
</script>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js?v=10';
linenumber();
</script> 这回是把粒子变成彩色的羽毛。。。
这羽毛的边缘还能看出是个漂亮的美人儿。。{:4_173:}真好看哪。。 花飞飞 发表于 2025-9-2 21:38
这回是把粒子变成彩色的羽毛。。。
这羽毛的边缘还能看出是个漂亮的美人儿。。真好看哪。。
这也看得出！PS高手就是厉害 24行代码不分行比分行看着更简洁。。
羽毛花花绿绿的，随机色这时候起作用了么。。 花飞飞 发表于 2025-9-2 21:45
24行代码不分行比分行看着更简洁。。
羽毛花花绿绿的，随机色这时候起作用了么。。
这个不是模块的随机色。模块没有针对图像做处理，仅对 fill 和 stroke 做颜色方面的制定。这是帖子JS代码处理的，看 27 行。 看背景，那些花纹像是一个巨大的阵法，{:4_170:}充满着未知的能量。。
飞舞的羽毛离开了天翼，营造出一种破碎之感，应和着标题。。。
音乐是真好听。。。 马黑黑 发表于 2025-9-2 21:39
这也看得出！PS高手就是厉害
虽然很隐秘，但还是很明显的好吧。。哈哈。。好巧妙的图片，收了收了。。 马黑黑 发表于 2025-9-2 21:48
这个不是模块的随机色。模块没有针对图像做处理，仅对 fill 和 stroke 做颜色方面的制定。这是帖子JS代码 ...
是JS实现的啊啊，色相滤镜，0-360之间数值随机，所以就呈现不同的颜色。。
可以给图片染色。。。
这思路巧妙逆天了，感觉赞一万个赞都不够。。{:4_170:} 花飞飞 发表于 2025-9-2 21:55
是JS实现的啊啊，色相滤镜，0-360之间数值随机，所以就呈现不同的颜色。。
可以给图片染色。。。
这思 ...
赞一个就可以了 花飞飞 发表于 2025-9-2 21:52
虽然很隐秘，但还是很明显的好吧。。哈哈。。好巧妙的图片，收了收了。。
挺漂亮的吧？框选，抠图，就这么简单，没用PS{:4_170:} 花飞飞 发表于 2025-9-2 21:50
看背景，那些花纹像是一个巨大的阵法，充满着未知的能量。。
飞舞的羽毛离开了天翼，营造出一种 ...
这类音乐都挺不错 svglz_fs.js 真好，可以用绘制的图片，还可以直接使用现成的图片，这个太好了{:4_199:} 红影 发表于 2025-9-2 22:26
svglz_fs.js 真好，可以用绘制的图片，还可以直接使用现成的图片，这个太好了
那是svg的 image 标签 红影 发表于 2025-9-2 22:26
从小播到背景到粒子，都紧扣翅膀的主题，这个制作太赞了
谢谢 马黑黑 发表于 2025-9-2 22:33
那是svg的 image 标签
这个好，总觉得用图图比画方便{:4_173:} 马黑黑 发表于 2025-9-2 22:34
谢谢
被黑黑找到这么多相关的呢{:4_187:} 红影 发表于 2025-9-2 23:13
被黑黑找到这么多相关的呢
{:4_190:} 红影 发表于 2025-9-2 23:13
这个好，总觉得用图图比画方便
图片在保真方面不行额