I Can(lrc_only模块演示)

位置: 首页 > 代码集锦
[发布: 2025.8.11  作者: 马黑  阅读: 212]
<style> @import 'https://638183.freep.cn/638183/web/css/tz01.css'; #pa { --offsetX: 0px; --bg: url('https://638183.freep.cn/638183/t24/w5/ican.webp') no-repeat center/cover; --ma-size: 15%; } #ma { left: 30px; top: 30px; display: grid; place-items: center; } .son { position: absolute; width: 20%; height: 100%; } .son::before, .son::after { position: absolute; content: ''; width: 100%; height: 100%; background: repeating-conic-gradient(cyan,transparent, cyan 20%); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); transform: scale(1); } .son::after { transform: scale(-1); } .son:nth-of-type(2) { transform: rotate(90deg); } /* 设置 lrc 歌词标签样式 */ #lrc { position: absolute; bottom: 20px; color: cyan; font-size: 30px; font-weight: bold; text-shadow: 1px 1px 2px #333; opacity: .9; } #btnFs { right: 30px; top: 30px; color: #333; } </style> <div id="pa"> <audio id="aud" src="https://music.163.com/song/media/outer/url?id=21224493" autoplay loop></audio> <video class="qk-vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/05/13/15/31/27/video6822f54f3f95f.mp4" autoplay loop muted></video> <div id="ma" class="invert"> <div class="son"></div> <div class="son"></div> </div> <!-- lrc歌词标签必须有 --> <div id="lrc">HUACHAO LRC</div> </div> <script type="module"> import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js'; import lrc from 'https://638183.freep.cn/638183/web/lrc/lrc_only.js'; // 创建歌词 var geci = ` [00:01:000]Minnutes - I Can [00:11.260]I can do anything [00:14.820]I can do anything today [00:17.950]I can do anything [00:21.220]I can do anything today [00:24.520]I can go anywhere [00:27.320]I can go anywhere today [00:30.150]I can go anywhere [00:33.230]I can go anywhere today [00:36.730]I can be anyone [00:40.080]I can be anyone today [00:42.900]I can be anyone [00:46.440]I can be anyone today [00:49.640]It's great to be with you [00:52.390]It's great to be with you today [00:55.440]It's great to be with you [00:58.560]It's great to be with you today [01:01.910]lala...huh... [01:33.160]I can do anything [01:35.890]I can do anything today [01:39.120]I can do anything [01:42.090]I can do anything today [01:45.370]I can go anywhere [01:48.140]I can go anywhere today [01:51.190]I can go anywhere [01:54.320]I can go anywhere today [01:57.740]I can be anyone [02:00.810]I can be anyone today [02:03.720]I can be anyone [02:06.840]I can be anyone today [02:10.290]It's great to be with you [02:13.040]It's great to be with you today [02:16.130]It's great to be with you [02:19.210]It's great to be with you today [02:23.610]lala...huh... `; FS(pa, ma); lrc(pa, geci); // 带上帖子元素和歌词标识 </script>

前一篇: conic+mask实现转场效果
下一篇: 就地取材:mask遮罩趣味玩法

发表评论:

  
 

评论列表 [2条]

#2 | 知名不具 于 2025-8-12 20:44 发布: 这个和那个逐字的代码一样的,只是使用的js封装不同。

#1 | 飞飞 于 2025-8-11 20:01 发布: 直接上代码了,有预览功能特别好,二合一了

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com