本帖最后由 花简静 于 2024-8-18 15:23 编辑
<style>
#papa { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: lightgreen url('https://pic.imgdb.cn/item/6617f29b68eb935713f9990c.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#papa > img { position: absolute; transform: translate(700px, -50px) rotate(-45deg); width: 80px; filter: hue-rotate(90deg); animation: fly 10s linear infinite var(--state); }
#papa > img:nth-of-type(2) { filter: hue-rotate(180deg); animation-delay: -5s; }
#iplay { position: absolute; left: 50%; transform: translate(-50%);bottom: 20px; width:90px; height: 60px; border-style: dotted double ridge; border-color: orange red; border-width: 20px; border-radius: 50%; outline: 10px double olive; outline-offset: 2px; animation: flash .4s linear infinite alternate var(--state); cursor: pointer; opacity: .46; z-index: 99;}
#iplay::before { position: absolute; content: ''; inset: -1px; border-radius: 50%;background: url('https://pic.imgdb.cn/item/65f830509f345e8d031873c7.png') no-repeat center/cover; z-index: -1; animation: rotating 10s linear infinite var(--state); }
#vid {
position: absolute;
width: 110%;
height: 100%;
top:-80px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .96;
}
@keyframes flash { to { border-color: red orange; outline-color: OliveDrab; } }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes fly { to { transform: translate(-50px, 280px) rotate(0); } }
</style>
<div id="papa">
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/79/86/60c98c8146068.mp4" autoplay="" loop="" muted=""></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1493427441" autoplay loop></audio>
<img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
<img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
<div id="iplay"></div>
<br><br><br><br><br><br>
</div>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '#iplay',
lrc_css: 'left: 50%; transform: translate(-50%);--bg: linear-gradient(rgba(250,250,250,.25),rgba(139,69,19.65)); opacity: .36;position: absolute; bottom: 50px; font: bold 1.8em sans-serif; color: #F0F8FF;',
});
};
let geci = [
[0.97,"单曲： 云深不知处",0.6],
[1.55,"歌手：缪安柠",1.3],
[2.81,"所属专辑：云深不知处",0.9],
[3.68,"作词 : 缪安柠",0.8],
[4.45,"作曲 : 缪安柠",0.7],
[5.15,"贺千山论坛落字秋风句芳辰",4.9],
[25.08,"为什么晴空会有云朵",4.3],
[30.06,"我猜那是你描绘的晚风",4.2],
[37.04,"酝酿蜜酒等在秋冬",2.1],
[39.09,"无事也打开闻闻那种",4.8],
[44.02,"寄向远方的思愁",2.7],
[50.13,"为什么频频忆起蜉蝣",3.9],
[55.01,"孑然一身来到这段巷口",3.9],
[61.06,"犹记你说此生迟暮",3.0],
[64.01,"有情人终究会成眷属",4.4],
[68.43,"我想是这样的",2.5],
[75.01,"当你走过 我会紧跟随你的身后",5.2],
[81.06,"当我回眸 月光悄然无声的洒落",2.2],
[87.08,"你踏着风 小雾摇曳晨曦中",5.0],
[92.06,"窃然的一撇 暗香浮动",4.7],
[96.77,"",14.3],
[111.05,"冬天的暖阳暖入心窝",4.8],
[117.04,"你的故事在古城里消融",4.1],
[123.05,"细香常伴漫长的路",2.6],
[126.03,"院落的雪我手捧入釜",3.3],
[130.16,"煮一壶茶静候",2.3],
[136.09,"当你走过 我会紧跟随你的身后",5.7],
[142.05,"当我回眸 月光悄然无声的洒落",5.8],
[148.05,"你踏着风 小雾摇曳晨曦中",5.7],
[154.16,"窃然的一撇 暗香浮动",3.0],
[158.52,"",1.8],
[160.29,"云雀还在叽叽喳喳",2.9],
[166.69,"见你日子渐渐近啦",2.6],
[172.08,"空想 在夜半",2.5],
[175,"钟声里",1.2],
[177.08,"扩大 发芽",4.7],
[185,"当你走过 我会紧跟随你的身后",6.1],
[191.57,"当我回眸 月光悄然无声的洒落",5.5],
[197.34,"你踏着风 小雾摇曳晨曦中",5.5],
[203.26,"窃然的一撇 暗香浮动",3.0],
[209.43,"窃然的一撇 暗香浮动",3.3],
];
</script>
<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
iplay.onclick = () => aud.paused ? aud.play() : aud.pause();
papa.onclick = () => aud.paused ? (vid.pause(),vid2.pause()) : (vid.play(),vid2.play());</script>
</script>
|
