本帖最后由 花简静 于 2025-2-5 19:07 编辑
<style>
.papa {
margin:130px 0 30px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://642303.freep.cn/642303/tu/20250125ziguiti.webp') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
position: relative;
z-index: 1; }
#btnplay {
position: absolute;
left: calc(50% - 50px);
top: -50px;
mix-blend-mode: normal;
transition: filter 1s;
cursor: pointer;
animation: rot 10s linear infinite var(--state); }
#btnplay:hover { filter: hue-rotate(280deg); }
.ipic { position: absolute;
top: 0; transform: skew(-6deg);
transform-origin: top center;
animation: skew 3s var(--delay) infinite alternate var(--state); }
.ipic:nth-of-type(1) { left: 20px; top: -230px; --delay: -2.5s; }
.ipic:nth-of-type(2) { left: 240px;top: -30px; --delay: 0s; }
.ipic:nth-of-type(3) { left: 120px; top: -160px; --delay: -1.5s; }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes skew { to { transform: skew(6deg); } }
#lrc { position: absolute; left: 50%; transform: translate(-50%); bottom:20px;font: bold 1.8em sans-serif; color: lightblue; text-shadow: 1px 1px 1px rgba(0,0,0,.45); user-select: none; --ani: lrcGo1; --duration: 1s; opacity: .45;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; background: repeating-linear-gradient(90deg, lightblue 3px, green 6px); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); border-bottom: 2px dashed lightblue; animation: var(--ani) var(--duration) linear forwards var(--state); }
#mplayer { position: absolute; left: 50%; transform: translate(-50%); bottom:60px;text-align: center; color: lightblue; }
#mplayer::before { position: absolute; content: attr(data-tt); left: 0; bottom: 26px; width: 100%; text-align-last: justify; }
#mprog { width: 280px; accent-color: darkgreen; outline: none; cursor: pointer; }
#mprog:focus { accent-color: gold; }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
#vid {
position: absolute;
width: 100%;
height: 100%;
opacity: .45;
right:-200px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
</style>
<div class="papa">
<audio src="https://music.163.com/song/media/outer/url?id=1375935067.mp3" autoplay="" loop=""></audio>
<img class="ipic" src="https://pic.imgdb.cn/item/65cb85159f345e8d03dcb745.png" alt="">
<img class="ipic" src="https://pic.imgdb.cn/item/65cb85159f345e8d03dcb745.png" alt="">
<img class="ipic" src="https://pic.imgdb.cn/item/65cb861d9f345e8d03e14839.png" alt="">
<div id="mplayer" data-tt="0:00 0:00">
<img id="btnplay" src="https://pic.imgdb.cn/item/65cc3a709f345e8d037b2f2c.png" title="播放/暂停" alt=""><br>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度">
</div>
<div id="lrc" data-lrc="HuaChao LRC">HuaChao LRC</div>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/32/39/62dbb485f32fd.mp4" autoplay="" loop="" muted=""></video>
</div>
<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/rangelrc2024.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
var geci = [
[0.62,"（G2er）杨花落尽子规啼",2.9],
[4.25,"闻道龙标过五溪",2.8],
[7.69,"我寄愁心与明月",2.9],
[11.19,"随风直到夜郎西",3.0],
[14.75,"（黄诗扶）倘若相逢即别离",2.9],
[18.29,"迢迢千里无期",2.9],
[21.88,"此地 何时 再相遇",4.6],
[28.1,"",1.7],
[29.79,"单曲：杨花落尽子规啼",1.0],
[30.79,"歌手：G2er / 黄诗扶 / 国风堂",1.0],
[31.76,"所属专辑：杨花落尽子规啼",1.3],
[33.04,"作词 : 李白/左木修",1.0],
[34.08,"作曲 : G2er/雾敛/卢一帆",1.2],
[35.24,"编曲 : WH宇恒",1.4],
[36.63,"",20.4],
[57.03,"（G2er）清风起",1.9],
[58.88,"风将温酒拂去一腔暖意",4.9],
[64.02,"知心人",1.1],
[65.08,"酒过半巡称知己",3.8],
[71.07,"（黄诗扶）诗中句",2.1],
[73.12,"总是难叙当时语",4.7],
[78.08,"他提笔",2.1],
[80.18,"借离别 嘁嘁",3.2],
[85,"（G2er）杨花落尽子规啼",3.2],
[88.83,"闻道龙标过五溪",3.0],
[92,"我寄愁心与明月",3.1],
[95.09,"随风直到夜郎西",4.4],
[99.48,"（黄诗扶）倘若相逢即别离",2.9],
[102.99,"迢迢千里无期",2.9],
[107.02,"此地 何时 再相遇",4.3],
[111.99,"",30.1],
[142.05,"（G2er）话中题",1.5],
[143.55,"总是难述平生遇",4.7],
[149.01,"他提笔",1.1],
[150.08,"借花月 噫噫",5.2],
[156.03,"（黄诗扶）杨花落尽子规啼",2.8],
[159.07,"闻道龙标过五溪",3.3],
[162.98,"我寄愁心与明月",2.9],
[166.01,"随风直到夜郎西",3.4],
[170.07,"（G2er）倘若相逢即别离",2.9],
[173.07,"迢迢千里无期",3.4],
[177.24,"何地 何时 再相遇",4.5],
[184.29,"（合）杨花落尽子规啼",2.7],
[187.08,"闻道龙标过五溪",3.5],
[191.17,"我寄愁心与明月",2.9],
[194.08,"随风直到夜郎西",3.6],
[198.03,"倘若相知即相惜",3.0],
[201.02,"昭昭明月无比",3.7],
[206.08,"何问 何惧 能与你",4.1],
[210.92,"",3.3],
[214.18,"吉他：顾雄",2.8],
[217,"二胡：辰小弦",1.3],
[218.25,"混音：徐志明",0.9],
[219.12,"设计：顾如愿",1.2],
[220.32,"出品：万象凡音",6]
];
</script>
|
