花简静贴子代码及说明汇总（翻页有新贴）

花简静 · 发表于 2025-9-7 18:06

本帖最后由花简静于 2025-9-7 18:25 编辑

花简静 · 发表于 2025-9-7 18:06

本帖最后由花简静于 2025-10-14 21:43 编辑

<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, 1700px); height: auto; aspect-ratio: 17/9;--bg: url('https://642303.freep.cn/642303/tu/20250907ydsr1.webp') no-repeat center/cover; --ma-size: 6%; }
#btnFs { right: 20px; top: 20px; color: #ccc; border-color: currentColor!important; }
#prog { position: absolute; right: 10px; bottom: 10px; width: var(--ma-size); cursor: pointer; filter: hue-rotate(83deg) opacity(.6); }
#ma { right: 0.7%; bottom: 5%; border-radius: 50%; }
#lrc { right: 1%; top: 36%; color: #333;font-size: 24px; font-weight: bold; letter-spacing: 4px; writing-mode: vertical-lr; }
#lrc::before { width: 100%; height: 0; background: url('https://642303.freep.cn/642303/tu/20250907ydsr.webp') center; background-clip: text; }
@keyframes cover1 { from { height: 0; } to { height: 100%; } }
@keyframes cover2 { from { height: 0; } to { height: 100%; } }
.vid { mixed-blend-mode: screen; webkit-mask: radial-gradient(transparent 20%, red);
-webkit-mask: radial-gradient(transparent 20%, red);
opacity: .60;
transform: rotateY(0deg);
mix-blend-mode: hard-light; transform: rotateY(0deg);}
#msvg line { stroke-dasharray: 4 8; stroke-dashoffset: 100%; animation: move 2s linear infinite alternate var(--state); }
@keyframes move { to { stroke-dashoffset: 0; } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=528478901" autoplay loop></audio>
<video class="vid pd-vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/13/00/18/video63649c6292566.mp4" autoplay loop muted></video>
<progress id="prog"></progress>
<div id="ma" class="opacity">
<svg id="msvg" width="100%" height="100%" viewBox="-100 -100 200 200"></svg>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/svglz_fs.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci= [
[2.21,"单曲：无问西东",2.2],
[4.39,"电影《无问西东》同名推广曲",1.2],
[5.55,"歌手：王菲",1.6],
[7.12,"所属专辑：无问西东",1.8],
[8.92,"作词 : 彭青",1.7],
[10.62,"作曲 : 彭青",0.8],
[11.39,"编曲 : 彭飞",2.2],
[13.58,"制作人 : 张亚东",1.0],
[14.57,"",1.6],
[16.18,"谁的手总紧紧牵住我的手",6.2],
[27,"不回头在人群沙漠中漂泊",6.4],
[38.03,"你别用含着泪的眼睛看我",5.5],
[44.3,"听蝉声沉落",2.4],
[48.06,"请抬头今宵露重",7.2],
[59.07,"是谁用带露的草叶医治我",7.4],
[70.07,"愿共我顶风暴泥泞中跋涉",7.0],
[81.02,"是谁说经过的路都是必需",6.2],
[87.79,"磨难尽收获",2.7],
[92.04,"山云做幕攀岩观火",6.8],
[102.02,"请由我引吭高歌",3.6],
[108.07,"面迎啊海上风",3.0],
[113.38,"在世界之外",1.8],
[116.07,"在时间之中",1.8],
[119.09,"无问西东",2.2],
[124.39,"就奋身做个英雄",2.9],
[129.88,"不枉那青春勇",3.1],
[135.26,"愿心之自由共天地俊秀",4.3],
[140.73,"有情有梦",2.2],
[146.57,"",20.6],
[168.09,"是谁用带露的草叶医治我",7.3],
[179.04,"愿共我顶风暴泥泞中跋涉",7.0],
[190.29,"是谁说经过的路都是必需",6.0],
[196.87,"磨难尽收获",2.6],
[198.48,"山云做幕攀岩观火",6.3],
[212.06,"请由我引吭高歌",3.1],
[217.29,"面迎啊海上风",2.9],
[222.01,"在世界之外",2.1],
[225.27,"在时间之中",1.8],
[228.3,"无问西东",2.1],
[233.09,"就奋身做个英雄",3.4],
[239.02,"不枉那青春勇",3.0],
[244.02,"愿心之自由共天地俊秀",4.8],
[251.44,"有情有梦",3.0]
];
var dr = Dr.dr(msvg);
dr.circle(0, 0, 80, 'none', '#fff', 10).set('stroke-dasharray', '4 8');
var tt = 3;
Array.from({length: tt}).forEach((_,k) => {
dr.line(3, 0, 70, 0, '#eee', 10).transform(`rotate(${360/tt*k})`).set('stroke-dasharray', '4 2');
});
aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
FS(pa, ma);
lrc(pa, geci);
</script>

复制代码

花简静 · 发表于 2025-9-7 18:06

花简静 · 发表于 2025-9-7 18:06

花简静 · 发表于 2025-9-7 18:06

花简静 · 发表于 2025-9-7 21:16

花简静 · 发表于 2025-9-7 21:16

花简静 · 发表于 2025-9-7 21:16

花简静 · 发表于 2025-9-7 21:16

花简静 · 发表于 2025-9-7 21:16