- UID
- 616
- 主题
- 回帖
- 0
- 精华
- 积分
- 29714
- 金币
- 枚
- 草籽
- 颗
- 鲜花
- 朵
- 注册时间
- 2023-11-16
- 最后登录
- 1970-1-1
|
楼主 |
发表于 2025-9-26 18:48
|
显示全部楼层
本帖最后由 花简静 于 2025-10-14 21:45 编辑
- <style>
- @import 'https://638183.freep.cn/638183/web/css/tz01.css';
- #pa { --offsetX: 0px;margin: 150px 0; left: calc(50% - 101px);width: clamp(600px, 90vw, 1600px); height: auto; aspect-ratio: 16/11; --bg: tan url('https://642303.freep.cn/642303/tu/20250092507yh.webp') no-repeat center/cover; }
- #progress { position: absolute; bottom: 26%; right:70%;width: 5vw; height: 5vw; transition: .4s; opacity: .7;}
- #g1 { cursor: pointer; fill: url(#grd); fill-opacity: .8; animation: rotate 8s linear infinite var(--state); }
- #g2 { cursor: pointer; fill: none; stroke: url(#grd); stroke-width: 10; stroke-linecap: round; }
- #prog { stroke: rgba(248,248,255,.6); }
- #lrc { left: 50%;transform: translateX(-50%);bottom: 20px;bottom: 20px;opacity: .96;}
- #btnFs { left: 20px; bottom: 20px; color: white; border-color: currentColor !important; }
- .pd-vid {
- -mask: linear-gradient(to right,transparent,transparent,red);
- -webkit-mask: linear-gradient(to right,transparent,transparent,red);
- opacity: .5;
- top:-100px;
- transform: rotateY(180deg);
- mix-blend-mode: screen;
- }
- </style>
- <div id="pa">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1471285412" autoplay loop></audio>
- <video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/00/79/86/60c98c8146068.mp4" autoplay loop muted></video>
- <svg id="progress" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
- <g id="g1" class="sepia"><title>ALT+X</title></g>
- <g id="g2"><title>调节进度</title></g>
- </svg>
- </div>
- <script type="module">
- import { FS } from 'https://638183.freep.cn/638183/web/js/pathprog.js';
- import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.mod.js?v=1.0';
- import lrc from 'https://642303.freep.cn/642303/tu/081505.js';
-
-
- var dr = Dr.dr(progress);
- dr.gradient('radialGradient', {id: 'grd'}, [['transparent',0],['#d3653b',.5],['#86a2b8',.7],['#286eba',1]]);
- dr.path('M0 0 Q-70 100,0 140 Q70 100,0 0').addTo(g1).rotates(5);
- dr.path('M-180 0 A180 180 0 1 0 180 0').id('track').addTo(g2);
- dr.path('M-180 0 A180 180 0 1 0 180 0').id('prog').addTo(g2);
-
- var geci = [
- [0.49,"单曲:沉醉的青丝",2.4],
- [2.87,"歌手:林宝馨",1.6],
- [4.43,"所属专辑:沉醉的青丝",0.9],
- [5.35,"作词:辛沐/林乔",1.2],
- [6.54,"作曲:武鹏飞",0.8],
- [7.33,"编曲:苏珂",0.9],
- [8.2,"演唱:林宝馨",1.0],
- [9.16,"吉他:苏珂",0.3],
- [9.45,"和声:黑优优",0.9],
- [10.39,"混音:谢骁",1.0],
- [11.4,"制作人:宋书良",1.0],
- [12.44,"监制:何湲",1.1],
- [13.5,"策划:刘宇航",0.8],
- [14.33,"OP: 讯飞音乐",0.9],
- [15.2,"",6.9],
- [22.08,"想你 念你",2.8],
- [26.01,"我追着你而去",2.5],
- [29.83,"想你 念你",2.7],
- [33.58,"停止再继续",2.0],
- [38.53,"我走过那条长椅",2.1],
- [42.01,"默守着那个秘密",2.3],
- [45.32,"拼命在脑海中寻你",3.5],
- [51.44,"如果回忆容易",1.7],
- [53.74,"我会想你念你",1.4],
- [55.57,"假装你在这里",2.6],
- [59.42,"那本旧的日历",1.8],
- [61.63,"翻了日期",1.6],
- [63.5,"告诉我牢记不容易",3.4],
- [67.09,"如果可以作弊",1.1],
- [68.68,"我会想你念你",1.3],
- [70.48,"到最后的荼蘼",2.8],
- [74.06,"时间不会犹豫",2.1],
- [76.75,"等一缕",1.2],
- [78.09,"为你而沉醉的青丝",4.4],
- [101.12,"想你 念你",2.6],
- [104.07,"我追着你而去",3.2],
- [108.05,"想你 念你",4.2],
- [112.26,"停止再继续",2.0],
- [116.67,"我走过那条长椅",2.9],
- [120.74,"默守着那个秘密",2.4],
- [124.04,"拼命在脑海中寻你",3.6],
- [130.06,"如果回忆容易",1.8],
- [132.51,"我会想你念你",1.4],
- [134.37,"假装你在这里",2.5],
- [138.16,"那本旧的日历",1.8],
- [140.6,"翻了日期",1.3],
- [142.29,"告诉我牢记不容易",2.8],
- [145.09,"如果可以作弊",1.8],
- [147.39,"我会想你念你",1.4],
- [149.27,"到最后的荼蘼",2.7],
- [153.13,"时间不会犹豫",1.6],
- [155.45,"等一缕",0.6],
- [156.03,"为你而沉醉的青丝",5.4],
- [164.07,"如果回忆容易",1.6],
- [166.18,"我会想你念你",1.4],
- [167.94,"假装你在这里",2.9],
- [171.84,"那本旧的日历",1.7],
- [174.09,"翻了日期",1.5],
- [176,"告诉我牢记不容易",3.0],
- [179,"如果可以作弊",1.7],
- [181,"我会想你念你",1.5],
- [183.11,"到最后的荼蘼",2.6],
- [186.04,"时间不会犹豫",2.6],
- [189.17,"等一缕",0.9],
- [190.4,"为你而沉醉的青丝",4.7]
- ];
- FS(pa, g1);
- lrc(pa, geci);
- </script>
复制代码 |
|