马黑黑老师《这个图案以前用svgdr画过》

醉美水芙蓉

<style>
    /* svg id选择器可以定义使用的部分属性（fill、stroke-*等） */
    #msvg { display: block; margin: auto; fill: none; stroke: steelblue; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
    /* 外层图案（齿轮）样式 */
    .path{ stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw linear 6s var(--delay) forwards; --delay: 4s; }
    /* 里层图案（圆）样式 */
    .cc { animation: grow linear 4s forwards; }
    /* 描边动画 */
    @keyframes draw { to { stroke-dashoffset: 0; } }
    /* 圆变大动画 */
    @keyframes grow { to { r: 120; } }
</style>

<svg id="msvg" width="600" height="600" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg"></svg>

<script>
    loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);

    function tzRun() {
        var dr = _dr(msvg);

        const vertex1 = dr.circlePoints(26, 200, 180); // 外切圆1点坐标
        const vertex2 = dr.circlePoints(26, 200, 160); // 外切圆2点坐标
        // 拼接路径
        let path = 'M';
        for (let i = 0; i < vertex1.length; i++) {
            const v1 = vertex1[i].join(',');
            const v2 = vertex2[i].join(',');
            path += i % 2 === 0 ? v1 + ' ' + v2 + ' ' : v2 + ' ' + v1 + ' ';
        };
        path += 'Z'; // 路径闭环
        dr.path(path).set('class', 'path'); // 绘制路径
        dr.elm.style.setProperty('--len', dr.elm.getTotalLength()); // 设置--len变量

        dr.circle(0, 0, 0).set('class', 'cc'); // 画圆
    }

    function loadJs(url, callback) {
        var script = document.createElement('script');
        script.charset = 'utf-8';
        script.src = url;
        script.onload = function() {
            if (callback) callback();
        };
        document.head.appendChild(script);
    }
</script>

醉美水芙蓉

path 路径通过两个外切圆获取各 26 个圆周上的点坐标，这些点按照预设规则连线成为闭合路径，最终的路径数据如下： M180.00,0.00 160.00,0.00 155.35,38.29 174.77,43.08 159.38,83.65 141.67,74.36 119.76,106.10 134.73,119.36 102.25,148.14 90.89,131.68 56.74,149.60 63.83,168.30 21.70,178.69 19.29,158.83 -19.29,158.83 -21.70,178.69 -63.83,168.30 -56.74,149.60 -90.89,131.68 -102.25,148.14 -134.73,119.36 -119.76,106.10 -141.67,74.36 -159.38,83.65 -174.77,43.08 -155.35,38.29 -160.00,0.00 -180.00,0.00 -174.77,-43.08 -155.35,-38.29 -141.67,-74.36 -159.38,-83.65 -134.73,-119.36 -119.76,-106.10 -90.89,-131.68 -102.25,-148.14 -63.83,-168.30 -56.74,-149.60 -19.29,-158.83 -21.70,-178.69 21.70,-178.69 19.29,-158.83 56.74,-149.60 63.83,-168.30 102.25,-148.14 90.89,-131.68 119.76,-106.10 134.73,-119.36 159.38,-83.65 141.67,-74.36 155.35,-38.29 174.77,-43.08 Z 复制代码

醉美水芙蓉

图案中，圆从小到大的动画，是通过改变圆的半径而得，半径从 0 长到 120。 在CSS中，圆的半径属性 r 得到原生支持，所以可以使用 @keyframes 关键帧动画选择器基于圆的半径设置动画

醉美水芙蓉

1. <style>
2. @import 'https://638183.freep.cn/638183/web/tz/tz.v4.css';
5. .pa {
6. --offsetX: 0px;
7. --bg: url('https://ff.xiaoqiaodali.top:5401/i/2026/06/21/6a36d4571ca23.gif') no-repeat center/cover;
8. --ma-size: 12%;
9. width: 450px;
10. height: 800px;
11. position: relative;
12. overflow: hidden;
13. }
15. .pa *, .pa *::before, .pa *::after {
16. content: none !important;
17. }
20. #custom-lrc-container {
21. position: absolute;
22. top: 50px; /* 定位显示的位置 */
23. right: 30px;
24. width: 2em; /* 宽高与横排时反过来 */
25. height: 80%;
26. writing-mode: vertical-rl; /* 设为竖排 */
27. z-index: 9999;
28. pointer-events: none;
29. }
32. .lrc-line {
33. position: absolute;
34. left: 50%;
35. transform: translateX(-50%);
36. white-space: nowrap;
37. color: #fefefe;
38. color:darkgreen;
39. font-size: 20px;
40. font-family: "隶书", "LiSu", serif;
41. font-weight: normal;
42. text-shadow: 0 0 12px rgba(0,0,0,0.8);
43. opacity: 0;
44. transition: opacity 0.5s ease, transform 0.5s ease;
45. margin: 0;
46. top: 0;
47. }
49. .lrc-line.active {
50. opacity: 1;
51. transform: translateX(-50%) scale(1.15);
52. z-index: 10;
53. }
56. @media (max-aspect-ratio: 9/16) {
57. .pa {
58. width: 100vw;
59. height: calc(100vw * 16 / 9);
60. }
61. }
63. @media (min-aspect-ratio: 9/16) {
64. .pa {
65. width: calc(100vh * 9 / 16);
66. height: 100vh;
67. }
68. }
69. </style>
71. <div class="pa">
72. <div id="custom-lrc-container"></div>
73. </div>
75. <script type="module">
76. import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v4.js';
78. const tz = TZ.TZ('pa');
80. tz.add('audio', '', '', { src: 'https://imgimg.qqdsw8.cn/view.php/915c88832e0049c6bd78acf0744ba633.mp3' });
81. tz.add('video', '', 'pd-vid', {src: 'https://imgimg.qqdsw8.cn/view.php/2ec28ce2bc8f195e7a531771c6e8ff41.mp4'}).style('opacity: 0.5;');
83. //
84. tz.add('img', '', 'ma', {
85. src: 'https://pic1.imgdb.cn/item/6a36c2802830ce602a508060.gif'
86. })
87. .style('right: 10px; bottom: 400px;')
88. .playmp3();
90. //
91. tz.bgprog().style('bottom: 50%; color: #fefefe; width: 80%; ')
92. tz.fs().style('left: 40px; top: 40px;');
93. const lrcString = `
94. [00:04.45]曾醉
95. [00:06.33]作词：五子
96. [00:07.91]作曲：Winky诗
97. [00:10.10]演唱：HITA
98. [00:25.50]山深问桃花染过几度春
99. [00:29.65]哪一枝勾住过客衣上风尘
100. [00:36.34]有倦意三分
101. [00:38.38]要行路千程
102. [00:41.12]怎记这山水静默待离人
103. [00:49.95]轻舟邀斜月听岸上孤筝
104. [00:54.14]回旋处恰趁醉踏青石前门
105. [01:00.79]有余音两声
106. [01:02.98]共与你微醺
107. [01:04.90]融入这一夜长灯落满身
108. [01:13.09]曾画下山间桃花流水逐云
109. [01:18.43]跌破了一晌贪梦了无痕
110. [01:23.92]倚泉浣笔重逢或偶遇洗不净
111. [01:29.40]点墨片心留在归梦时分
112. [01:58.22]斟满浮生在酒中浮与沉
113. [02:02.17]哪一口填满岁月旧日余温
114. [02:08.79]有醉意三分
115. [02:10.90]都酿做前尘
116. [02:13.70]梦醒后又在何处扮离人
117. [02:22.39]红梅邀斜月听墙里孤筝
118. [02:26.85]回旋处不是你惯唱的游吟
119. [02:33.54]似乡音两声
120. [02:35.68]唱今雪纷纷
121. [02:37.64]错看成那年桃花落满身
122. [02:45.83]曾见你山间走马落日长云
123. [02:51.25]踏破了一声珍重无处闻
124. [02:56.70]敛花做酒
125. [02:58.57]相送或独酌都太冷清
126. [03:02.25]待到如今那池春水已平
127. [03:08.13]用醉眼看不清擦肩人
128. [03:13.70]酒醒后分不清假与真
129. [03:19.13]行遍天涯旧约难记存
130. [03:23.85]分岔太多归路不可寻
131. [03:29.41]曾画下山间桃花流水逐云
132. [03:34.88]跌破了一晌贪梦何处寻
133. [03:40.28]倚泉浣笔
134. [03:42.30]重逢或偶遇洗不净
135. [03:45.82]点墨片心留在归梦时分
136. [03:51.23]曾见你山间走马落日长云
137. [03:56.60]踏破了一声珍重了无痕
138. [04:02.05]敛花做酒
139. [04:03.82]相送或独酌都太冷清
140. [04:07.66]待到如今那池春水已平`;
142. function initCustomLrc(lrcText) {
143. const container = document.getElementById('custom-lrc-container');
144. const lines = [];
146. const lineRegex = /\[(\d{2})\d{2})\.(\d{2,3})\](.*)/;
147. const rawLines = lrcText.split('\n');
149. rawLines.forEach(text => {
150. const match = text.match(lineRegex);
151. if (match) {
152. const minutes = parseInt(match[1]);
153. const seconds = parseInt(match[2]);
154. const milliseconds = parseInt(match[3]);
155. const time = minutes * 60 + seconds + milliseconds / 1000;
156. let content = match[4].trim();
159. content = content.replace(/&#\d+;/g, '').trim();
161. if (content) {
162. lines.push({ time, content, element: null });
163. }
164. }
165. });
167. lines.forEach((line) => {
168. const div = document.createElement('div');
169. div.className = 'lrc-line';
170. div.textContent = line.content;
171. container.appendChild(div);
172. line.element = div;
173. });
175. const audio = document.querySelector('.pa audio');
177. if (audio) {
178. audio.addEventListener('timeupdate', () => {
179. const currentTime = audio.currentTime;
180. let activeIndex = -1;
182. for (let i = 0; i < lines.length; i++) {
183. if (currentTime >= lines[i].time) {
184. activeIndex = i;
185. } else {
186. break;
187. }
188. }
190. lines.forEach((line, idx) => {
191. if (idx === activeIndex) {
192. line.element.classList.add('active');
193. } else {
194. line.element.classList.remove('active');
195. }
196. });
197. });
199. audio.addEventListener('ended', () => {
200. lines.forEach(line => line.element.classList.remove('active'));
201. });
202. }
203. }
205. setTimeout(() => {
206. const audioEl = document.querySelector('.pa audio');
207. if(audioEl) {
208. initCustomLrc(lrcString);
209. } else {
210. const observer = new MutationObserver(() => {
211. const aud = document.querySelector('.pa audio');
212. if(aud) {
213. initCustomLrc(lrcString);
214. observer.disconnect();
215. }
216. });
217. observer.observe(document.querySelector('.pa'), { childList: true, subtree: true });
218. }
219. }, 500);
220. let prog = document.querySelector('.prog');
221. prog.style.transform = 'rotate(-90deg)';
222. prog.style.cssText += 'left:300px;top:250px;color:brown;';
224. </script>

复制代码

-->

LRC歌词

klxf

漂亮~谢谢分享，祝开心

醉美水芙蓉

klxf 发表于 2026-6-22 14:01
本帖最后由 klxf 于 2026-6-22 21:57 编辑 漂亮~谢谢分享，祝开心

谢谢友友光临！