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

花简静

HUACHAO LRC

花简静

1. <style>
   
2.         @import 'https://638183.freep.cn/638183/web/css/tz01.css';
   
3.         #pa { --offsetX: 0px;  margin: 150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1700px); height: auto; aspect-ratio: 17/9;--bg: beige url('https://642303.freep.cn/642303/tu/20250914xhs02.webp') no-repeat center/cover; }
   
4.         #progress { position: absolute; width: 90px; height: 90px; right: 56%; bottom: 32%; }
   
5.         #prog, #track { fill: none; stroke: #ffffff; stroke-opacity: .3; stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; transition: .15s; cursor: pointer; }
   
6.         #prog { stroke: green;z-index:100; }
   
7.         #player { transform-box: fill-box; transform-origin: center; cursor: pointer; fill: #813f18; fill-rule: evenodd; fill-opacity: .5; animation: rotate 8s linear infinite var(--state); }
   
8.         #lrc { position: absolute; bottom: 20px; color: #B0E0E6; font-size: 30px; font-weight: bold; text-shadow: 1px 1px 2px #333; opacity: .3; }
   
9.         #btnFs { right: 20px; top: 20px; color: #174d4e; border-color: currentColor!important; }
   
10.         .pd-vid { width: 100%; height:100%;-webkit-mask: linear-gradient(to bottom,transparent,red);bottom:-40%; object-fit: cover;
    
11.     pointer-events: none;mix-blend-mode:soft-light;opacity: .45;}
    
12.    
    
13. </style>
    
14. 
    
15. <div id="pa">
    
16.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1950291916" autoplay loop></audio>
    
17.         <video class="pd-vid" src="https://bpic.588ku.com/video_listen/588ku_preview/22/10/18/11/30/10/video634e1dc272e74.mp4" autoplay loop muted></video>
    
18.          <div id="lrc">HUACHAO LRC</div>
    
19.         <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
    
20.                 <path id="player" d="M400.00 200.00,L75.30 356.37,L155.50 5.01,L380.19 286.78,L19.81 286.78,L244.50 5.01,L324.70 356.37,L0.00 200.00,L324.70 43.63,L244.50 394.99,L19.81 113.22,L380.19 113.22,L155.50 394.99,L75.30 43.63"><title>Alt+X</title></path>
    
21.                 <circle id="track" cx="200" cy="200" r="80"><title>调节进度</title></circle>
    
22.                 <circle id="prog" cx="200" cy="200" r="80"><title>调节进度</title></circle>
    
23.         </svg>
    
24. </div>
    
25. 
    
26. <script type="module">
    
27.         import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
    
28.         import lrc from 'https://638183.freep.cn/638183/web/lrc/lrc_only.js';
    
29.     var geci = `
    
30.         [00:00.480]单曲：风吹过的地方你都在
    
31.         [00:02.840]歌手：喻言
    
32.         [00:07.364]所属专辑：W
    
33.         [00:09.72]作词 : 喻言
    
34.         [00:11.877]作曲 : 喻言
    
35.         [00:13.116]编曲 : 杨任衔
    
36.         [00:15.420]制作人 : 吕忠训@锐声音乐
    
37.         [00:20.940]
    
38.         [00:21.692]透过往昔的窗看见熟悉的侧脸
    
39.         [00:28.06]叹晚霞如血不过一瞬间
    
40.         [00:35.070]留下灰色一片犹如昨天
    
41.         [00:43.024]弹指间过一年
    
42.         [00:50.026]掀开遮住的帘还是无畏的双眼
    
43.         [00:57.158]把第一束光留在我掌间
    
44.         [01:04.563]就算乌云层层叠叠分不清表面
    
45.         [01:12.410]不回头不留恋
    
46.         [01:19.046]夏夜的风啊划过你的脸
    
47.         [01:26.022]灯下的倒影早已不是从前
    
48.         [01:34.55]踩着一片片落叶一点点想念
    
49.         [01:41.030]轻轻靠向左边发现你已不见
    
50.         [01:54.086]掀开遮住的帘还是无畏的双眼
    
51.         [02:02.116]把第一束光留在我掌间
    
52.         [02:09.054]就算乌云层层叠叠分不清表面
    
53.         [02:16.972]不回头不留恋
    
54.         [02:23.056]夏夜的风啊划过你的脸
    
55.         [02:31.095]灯下的倒影早已不是从前
    
56.         [02:38.026]踩着一片片落叶一点点想念
    
57.         [02:46.074]轻轻靠向左边发现你已不见
    
58.         [02:59.940]
    
59.         [03:15.068]没有你的秋天也会笑着想念
    
60.         [03:30.940]
    
61.         [03:45.042]没有你的秋天也会笑着想念
    
62.         [03:52.074]学会独当一面在成为你之前
    
63. `;
    
64.         FS(pa, player);
    
65.         lrc(pa, geci);
    
66. </script>

复制代码

花简静

花简静

花简静

花简静

花简静

花简静

花简静

花简静