本帖最后由 花简静 于 2024-4-8 21:46 编辑
<style>
#papa { margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://pic.imgdb.cn/item/6613ed1768eb9357136015b5.webp') no-repeat center/cover; background-blend-mode: darken; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#lrc { position: absolute; left: 50%; transform: translate(-50%);bottom: 10px; font: bold 1.8em sans-serif; color: gray; text-shadow: 1px 1px 1px rgba(0,0,0,.45); --ani: lrcGo1; --duration: 1s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; background: repeating-radial-gradient(orange, gray 6px); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); animation: var(--ani) var(--duration) linear forwards var(--state); border-bottom: 2px dashed gray; }
#btnplay { position: absolute; bottom: 100px; right: 180px; width: 200px; height: 200px; opacity: .7; animation: rotating 6s linear infinite var(--state); cursor: pointer; }
ye-zi { position: absolute; left: calc(50% - 0.5 * var(--ww)); top: 0; width: var(--ww); height: 100px; border-radius: 60%; background: repeating-radial-gradient(gray, tan 20%); transform-origin: 50% 100%; transform: rotate(var(--deg)); }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
#vid { position: absolute; bottom:0px; width: 100%; height:100% ; object-fit: cover; mix-blend-mode: screen; pointer-events: none; clip-path: polygon(0 0,80% 0,80% 20%,100% 20%,100% 100%,0 100%);filter: opacity(.66); }
</style>
<div id="papa">
<audio src="https://file.uhsea.com/2402/97ec26614183d020eb768b93f297df5bES.mp3" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/79/55/60c1c62b9766e.mp4" loop muted disablePictureInPicture></video>
<div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
<div id="btnplay"></div>
</div>
<script>
var geci = [ [-2,"赠：我本无漪",6], [10,"一颗狼星_许篮心 / 月亮和祂的诗人们",6], [20.0,"出品：月亮和祂的诗人们",6], [28.92,"我和读我的人，是两朵生病的花",12.2], [41.85,"生长着野草心脏，与野花耳朵",13.6], [56.67,"在睡眠淡季，寂寞地",7.5], [64.93,"收集雨的吻痕、梦的乳牙",7.5], [72.96,"一生躲在诗里的拾荒者",8.6], [82.64,"迷失于风的韵脚，爱意哀伤决堤",12.0], [95.48,"长日诗意饥荒，心事被夜鸟捡去",13.8], [110.43,"在风的口中，我约等于被遗忘的伤痕",17.7], [129.35,"疼到无边无际，无边无际",14.6], [149.21,"等待谁，于长吻之末，回收我的生命",23.0] ];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc-01.js';
document.querySelector('body').appendChild(sF);
Array.from({length: all = 5}).forEach((item,key) => {
item = document.createElement('ye-zi');
item.style.cssText += `--ww: 60px; --deg: ${360 / all * key}deg;`;
btnplay.prepend(item);
});
papa.onclick = () => aud.paused ? (vid.pause(),vid2.pause()) : (vid.play(),vid2.play());</script>
</script>
<br><br><br><br><br><br>
|
