本帖最后由 花简静 于 2025-8-27 20:01 编辑
<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, 1700px); height: auto;--bg: #000 url('https://642303.freep.cn/642303/tu/20250822cx01.webp') no-repeat 30% 20%/100% 100%; --ma-size: 6%; --opacity: 1; }
#pa::before { position: absolute; content: ''; inset: 0; background: url('https://642303.freep.cn/642303/za/feiniao.gif') no-repeat 20% 20%/30% 30%; opacity: var(--opacity); transition: 1.2s; }
#btnFs { bottom: 30px; color: #eee; }
#ma {right:20%;top:60%;opacity: .6;
}
#lrc { right: 40px; top: 40px; color: #333; letter-spacing: 4px; writing-mode: vertical-lr; }
#lrc::before { width: 100%; height: 0; background: url('https://642303.freep.cn/642303/za/xiaobo3_133581705927067500.png') center; background-clip: text; }
@keyframes cover1 { from { height: 0; } to { height: 100%; } }
@keyframes cover2 { from { height: 0; } to { height: 100%; } }
.pd-vid {
-mask: linear-gradient(to bottom,transparent,red);
-webkit-mask: linear-gradient(to bottom,transparent,red);
opacity: .1;
transform: rotateY(0deg);
mix-blend-mode: hard-light;
}
</style>
<div id="pa">
<audio id="audio" src="https://music.163.com/song/media/outer/url?id=404784312" autoplay loop></audio>
<video class="pd-vid" src="https://bpic.588ku.com/video_listen/588ku_preview/23/09/15/19/06/52/video65043accaa003.mp4" autoplay loop muted></video>
<svg id="ma" class="hue-rotate" viewbox="0 0 400 400"><title>ALT+X</title></svg>
</div>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import lrc from 'https://638183.freep.cn/638183/web/lrc/hclrc_only.js';
var geci = [
[1.16,"单曲：潮汐",1.1],
[2.27,"歌手：齐浠儿",1.2],
[3.5,"所属专辑：潮汐",0.8],
[4.31,"作词 : 唐宁",1.1],
[5.36,"作曲 : 赵博",1.0],
[6.39,"作曲 : 赵博",1.1],
[7.49,"作词 : 唐宁",0.7],
[8.17,"",10.3],
[18.52,"寻寻觅觅",1.0],
[20.03,"想念轮回了几个世纪",3.7],
[26.08,"谁都不知道海岸的平静",3.6],
[30.05,"是你错过我期待的眼睛",3.6],
[35.19,"我从没忘记",1.2],
[36.64,"下一次还会始终凝望着你",4.9],
[43.01,"你沉默不语漂洋过海",3.7],
[47.91,"拍打岸堤留下了美丽",2.5],
[52.19,"我跟着你",1.7],
[55.14,"让记忆跟着一片片潮汐",2.8],
[58.55,"流下泪滴",1.3],
[61.03,"丢在冰冷潮湿的沙滩上 独自叹息",6.2],
[69.09,"我跟着你",1.4],
[71.01,"让我在你深邃的记忆里 流下泪滴",5.4],
[78.07,"留在我们伤痛的空气里",4.7],
[86.07,"跟着你",2.1],
[107.01,"谁都不知道海岸的平静",3.3],
[111.16,"是你错过我期待的眼睛",3.1],
[115.09,"我从没忘记",1.9],
[117,"下一次还会始终凝望着你",5.3],
[123.85,"你沉默不语漂洋过海",3.5],
[128.04,"拍打岸堤留下了美丽",3.3],
[133.03,"我跟着你",1.6],
[135.77,"让记忆跟着一片片潮汐 流下泪滴",4.8],
[142.08,"丢在冰冷潮湿的沙滩上 独自叹息",5.8],
[149.86,"我跟着你",1.3],
[152.09,"让我在你深邃的记忆里 流下泪滴",5.0],
[158.05,"留在我们伤痛的空气里",5.3],
[165.31,"你 让记忆跟着一片片潮汐 流下泪滴",6.3],
[173.04,"丢在冰冷潮湿的沙滩上 独自叹息",6.0],
[180.93,"我跟着你",1.2],
[183.34,"让我在你深邃的记忆里 流下泪滴",4.8],
[189.57,"留在我们伤痛的空气里",4.9]
];
const dr = Dr.dr(ma);
var path = 'M60 60 A100 100 0 0 1 160 160', tt = 30;
Array.from({length: tt}).forEach((_, k) => {
dr.path( path, 'none', '#D2B48C', 8, 'round').transform(`rotate(${360 / tt * k}, 200, 200)` );
});
audio.onplaying = audio.onpause = () => pa.style.setProperty('--opacity', audio.paused ? '0' : '1');
FS(pa, ma);
lrc(pa, geci);
</script>
|
