本帖最后由 花简静 于 2024-6-22 17:49 编辑
<style>
#tz { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/buwang02.webp') no-repeat center/cover; box-shadow: 2px 2px 3px gray; z-index: 1; overflow: hidden; position: relative; }
#tz::before { content: attr(data-lrc); position: absolute; left: 710px; top: 380px; width: 60px; height: 95%; writing-mode: vertical-rl; font: 24px/60px STXingkai; color: transparent; background: repeating-linear-gradient(to bottom, AntiqueWhite, Tan, Wheat, GoldEnrod, AntiqueWhite) 50%/60px 200px; -webkit-background-clip: text; filter: drop-shadow(1px 1px 1px black); }
#player { left: calc(50% - 160px); bottom: 590px; width: 120px; height: 120px; filter: drop-shadow(0 0 50px white); cursor: pointer; transition: .5s; position: absolute; display: grid; filter: drop-shadow(0 0 40px Beige);place-items: center; animation: rot 16s linear infinite var(--state); opacity: .99;}
#player:hover { width: 20px; }
c-c { position: absolute; width: 80%; height: 150%; border: none; border: 2px dotted plum;content: url('https://642303.freep.cn/642303/za/2024062102.png') ; border-radius: 50%; opacity: .69; }
#vid { position: absolute; top:-80px; width: 100%; height: 120%; object-fit: cover; mix-blend-mode: screen; opacity: .35; pointer-events: none; opacity: .15;}
@keyframes rot { to { transform: rotate(1turn); } }
.pic { position: absolute; top: 0; left: 0; width: 60px; transform: rotate(90deg); offset-path: path('M0 800Q 892 1000, 1700 200'); offset-distance: 0; animation: fly 30s infinite var(--state);opacity: .35; }
.pic:nth-of-type(2) { animation-delay: -8s; filter: hue-rotate(60deg); }
.pic:nth-of-type(3) { animation-delay: -15s; filter: hue-rotate(90deg); }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { offset-distance: 100%; } }
</style>
<div id="tz" data-lrc="HUACHAO">
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/01/04/62/614ade273f6d1.mp4" autoplay loop muted disablePictureInPicture></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2019776786" autoplay loop></audio>
<img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
<img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
<img class="pic" alt="" src="https://638183.freep.cn/638183/t22/gif/hudie.gif" />
<div id="player" title="播放/暂停"></div>
</div>
<script>
var curkey = 0, lrcAr = [], total =10;
Array.from({length: total}).forEach((c,k) => {
c = document.createElement('c-c');
c.style.cssText += `
transform: rotate(${360 / total * k}deg);
border-color: Olive;
`;
player.appendChild(c);
});
var getAr = (text) => {
var ar = text.trim().split('\n');
ar.sort();
var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
let result = item.match(reg);
let tmsg = parseInt(result[1]) * 60 + parseInt(result[2]) + parseInt(result[3]) / 1000;
lrcAr.push([tmsg, result[4].trim()]);
});
};
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
if(curkey > lrcAr.length - 1) return;
if(aud.currentTime >= lrcAr[curkey][0]) {
tz.dataset.lrc = lrcAr[curkey][1];
curkey ++;
}
};
player.onclick = () => aud.paused ? aud.play(): aud.pause();
var lrc = `
[00:00.00]许巍 - 执着
[00:06.50]学习黑师20240620《云朵》竖排歌词效果
[00:16.00]歌词编辑：朱学赢
[00:20.37]词曲：许巍
[00:26.62]每个夜晚来临的时候
[00:30.92]孤独总在我左右
[00:32.89]每个黄昏心跳的等候
[00:35.90]是你无限的温柔
[00:38.28]每次面对你的时候
[00:41.99]不敢看你的双眸
[00:44.92]在我温柔的笑容背后
[00:48.03]有多少泪水哀愁
[01:05.06]不管时空怎么转变
[01:07.94]世界怎么改变
[01:10.79]你的爱总在我心间
[01:13.85]你是否明白
[01:16.85]我想超越这平凡的生活
[01:19.96]注定现在就是漂泊
[01:22.82]无法停止我内心的狂热
[01:26.10]对未来的执着
[01:35.34]拥抱着你
[01:36.86]oh my baby
[01:38.33]我看到你在流泪
[01:41.12]是否爱我让你伤悲
[01:44.03]让你心碎
[01:47.20]拥抱着你
[01:48.84]oh my baby
[01:50.37]可你知道我无法后退
[01:53.17]纵然是我苍白憔悴
[01:56.23]伤痕累累
[02:25.47]不管时空怎么转变
[02:29.74]世界怎么改变
[02:32.89]你的爱总在我心间
[02:36.02]你是否明白
[02:39.19]我想超越这平凡的生活
[02:42.17]注定现在就是漂泊
[02:45.12]无法停止我内心的狂热
[02:47.90]对未来的执着
[02:56.94]拥抱着你
[02:58.64]oh my baby
[02:60.20]我看到你在流泪
[03:03.10]是否爱我让你伤悲
[03:06.01]让你心碎
[03:09.13]拥抱着你
[03:10.60]oh my baby
[03:12.41]可你知道我无法后退
[03:15.31]纵然是我苍白憔悴
[03:18.33]伤痕累累
[03:26.05]拥抱着你
[03:27.44]oh my baby
[03:29.16]我看到你在流泪
[03:32.06]是否爱我让你伤悲
[03:35.04]让你心碎
[03:38.13]拥抱着你
[03:39.64]oh my baby
[03:41.22]可你知道我无法后退
[03:44.23]纵然是我苍白憔悴
[03:47.17]伤痕累累
[03:52.03]纵然是我苍白憔悴
[03:54.77]伤痕累累
[04:09.00]oh baby don’t cry
`;
getAr(lrc);
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
| 
