【黑师代码】流年都在你眉眼（学习黑师20250903《世中逢尔雨逢花》粒子飞舞效果）
<style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; margin: 150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/11;--bg: url('https://642303.freep.cn/642303/za/20250907yundi02.webp') no-repeat center/cover; --ma-size: 3%; }
#ma { left: 48%; top: 40%; background: url('https://642303.freep.cn/642303/za/001.png') no-repeat center/cover; }
#btnFs { right: 30px; bottom: 30px; color: lightblue; border-color: currentColor!important; }
#svg use { opacity: 1; animation: flash 18s var(--delay) infinite alternate var(--state); }
#lrc { position: absolute; bottom: 20px; color: #B0E0E6; font-size: 30px; font-weight: bold; text-shadow: 1px 1px 2px #333; opacity: .9; }
@keyframes flash { to { opacity: 0.5; transform: rotate(270deg); } }
.pd-vid {
width: 100%;
height: 60%;
right:-30%;
top:30%;
object-fit: cover;
pointer-events: none;
mix-blend-mode:screen;
-webkit-mask: radial-gradient(circle, cyan, cyan,rgba(0,0,0,.35),transparent, transparent, transparent, transparent);
opacity: .95;
}
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1915537678" autoplay loop></audio>
<video class="pd-vid" src="https://bpic.588ku.com/video_listen/588ku_preview/21/09/13/11/23/15/video613ec4234621a.mp4" autoplay loop muted></video>
<div id="ma" class="brightness"></div>
<div id="lrc">HUACHAO LRC</div>
<svg id="svg" width="100%" height="100%" viewBox="0 0 1600 1100">
<defs>
<g id="svgShape">
<image x="0" y="0" width="35" height="35" href="https://642303.freep.cn/642303/za/pgy.png" />
</g>
<path id="motionPath" d="M300 400 L1200 1100" />
</defs>
</svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/lrc_only.js';
var geci = `
单曲：月落续此篇
歌手：小田音乐社 / 南栖
所属专辑：月落续此篇
作词 : 沈秋离
作曲 : 莫卿
编曲 : HoranTeo
制作人 : 爱写歌的小田/戾格
雕楼桥畔
凉雨如烟
花落杯盏
暗香疏染
风吹轻纱
珠帘漫卷
铃动入诗几篇
年少自恃
春风不改
偷得浮生
一晌贪欢
夜泊提灯
孤身凭栏
故人琴声已远
谁与我畅谈
流年都在你眉眼
谁许我月满
落雪处携手共看
攒笔不成诗
我捻灯轻叹
临窗搁一半
月落续此篇
雕楼桥畔
凉雨如烟
花落杯盏
暗香疏染
风吹轻纱
珠帘漫卷
铃动入诗几篇
年少自恃
春风不改
偷得浮生
一晌贪欢
夜泊提灯
孤身凭栏
故人琴声已远
谁与我畅谈
流年都在你眉眼
谁许我月满
落雪处携手共看
攒笔不成诗
我捻灯轻叹
临窗搁一半
月落续此篇
谁与我畅谈
流年都在你眉眼
谁许我月满
落雪处携手共看
攒笔不成诗
我捻灯轻叹
临窗搁一半
月落续此篇
`;
var setting = { svg: svg, lz:8, dur: 14, gap: 600 };
FS(pa, ma, setting);
lrc(pa, geci);
</script> @马黑黑 白老师来给瞧瞧，交一份粒子飞舞的作业。{:4_173:} 花飞飞 发表于 2025-9-7 21:38
@马黑黑 白老师来给瞧瞧，交一份粒子飞舞的作业。
这个也太漂亮了吧 马黑黑 发表于 2025-9-7 21:39
这个也太漂亮了吧
真的么，我再多看几眼，你夸的是颜色还是排版。。{:4_173:} 欣赏飞飞精彩的大图{:4_199:}{:4_171:} 黑黑代码效果棒棒的，飞飞好棒！ 我先去看看黑黑这个的源码分享 小辣椒 发表于 2025-9-7 21:57
欣赏飞飞精彩的大图
小辣椒来了，看到你真是开心 小辣椒 发表于 2025-9-7 22:00
黑黑代码效果棒棒的，飞飞好棒！
小辣椒的支持一直给力{:4_187:} 小辣椒 发表于 2025-9-7 22:01
我先去看看黑黑这个的源码分享
好哒，最近的效果都很炫酷{:4_173:} 这漂亮的蒲公英的飘飞那么淡雅。这背景图也极美。
还带歌词同步呢，这个制作太美了，给飞飞点赞{:4_199:} 花飞飞 发表于 2025-9-7 22:04
小辣椒来了，看到你真是开心
飞飞好，小辣椒好几天没有上来了 花飞飞 发表于 2025-9-7 22:04
小辣椒的支持一直给力
飞飞客气了，小辣椒都很少玩了，支持飞飞是必须的{:4_178:} 花飞飞 发表于 2025-9-7 22:05
好哒，最近的效果都很炫酷
黑黑最近的效果很美哦，可惜小辣椒没有时间玩，现在发的许多也是以前的旧帖了 这个小姑娘好看{:4_199:}
页:
[1]