本帖最后由 花简静 于 2024-8-18 15:42 编辑
<style>
@import 'https://638183.freep.cn/638183/web/css/yslrc.css';
#mydiv {
margin: 130px 0 30px calc(50% - 931px);
position: relative;
width: 1700px;
height: 900px;
background: url('https://642303.freep.cn/642303/tu/20240801yiqi.webp') no-repeat center/cover;
box-shadow: 3px 3px 8px gray;
overflow: hidden;
}
#mydiv::before {
position: absolute;
content: '';
inset: 0;
background: repeating-linear-gradient(transparent, PaleTurquoise 2px) repeat;
opacity: .45;
-webkit-mask: radial-gradient(circle, transparent, transparent,transparent,silver, lightgreen, cyan, transparent);
animation: up 10s ease-in-out infinite alternate var(--state);
}
#lrc {
position: absolute;
left: 50%; transform: translate(-50%);
bottom: 30px;
font: bold 2.4em cursive;
color: Azure;
text-shadow: 1px 1px 1px rgba(0,0,0,.25);
--ani: lrcGo1;
--duration: 1s;
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 100%;
height: 100%;
color: transparent;
background: repeating-linear-gradient(60deg, transparent,MediumTurquoise 20px);
background-clip: text;
-webkit-background-clip: text;
clip-path: inset(0 100% 0 0);
animation: var(--ani) var(--duration) linear forwards var(--state);
}
#player {
--size: 80px;
}
.yz {
position: absolute;
width: 300px;
height: 100%;
background: url('https://pic.imgdb.cn/item/66ab1d0fd9c307b7e9fb61d0.jpg') no-repeat center/cover;
-webkit-mask: linear-gradient(to right, red, transparent);
}
.yz:nth-of-type(2) {
right: -80px;
width: 400px;
bottom:-220px;
mix-blend-mode: screen;
filter: opacity(.42) sepia(80%);
background: url('https://pic.imgdb.cn/item/66ab1d0fd9c307b7e9fb61dc.jpg') no-repeat center/cover;
-webkit-mask: radial-gradient(ellipse, silver, lightgreen, cyan, transparent,transparent,transparent);
transform: rotateY(180deg);
}
.vid { height: calc(100% + 80px);mix-blend-mode: screen;opacity: 0.79; -webkit-mask: radial-gradient(circle, transparent, transparent,transparent,silver, lightgreen, cyan, transparent, transparent,transparent); }
#btnplay {
position: absolute;
right: 670px;
top: 230px;
width: 80px;
height: 80px;
background: url('https://pic.imgdb.cn/item/6586d6ddc458853aefca6c74.png') no-repeat center/cover;
animation: rotating 6s linear infinite var(--state);
cursor: pointer;
}
@keyframes up {
0% { inset: 0; }
25% { inset: 50% 0 50% 0; }
50% { inset: 0; }
75% { inset: 0 50% 0 50%; }
100% { inset: 0; }
}
@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); } }
</style>
<div id="mydiv">
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bbec819c90.mp4" autoplay loop muted></video>
<div class="yz"></div>
<div class="yz"></div>
<audio src="https://music.163.com/song/media/outer/url?id=1969845482" autoplay loop></audio>
<div id="lrc" data-lrc="HUACHAO LRC">HUACHAO LRC</div>
<div id="btnplay" class="player" title="播放/暂停" alt="" /></div>
</div>
<script>
var geci = [
[1.18,"单曲：一直在一起好吗",0.9],
[2.13,"歌手：欧得洋",1.1],
[3.18,"作词 : 沐毅",1.1],
[4.31,"作曲 : 王健美",0.6],
[4.89,"编曲 : 韩俊平",0.5],
[5.35,"制作人 : 欧得洋",1.9],
[7.23,"学习黑师20240801《另一个自己》融合图片效果",5.0],
[12.23,"",0.8],
[13.07,"我们⼀起去天台看星星 看落⽇河畔慢慢结成冰",8.0],
[22,"听老时钟滴答着岁⽉声 傍晚猫咪落地窗电影",7.0],
[30.39,"风尽管吹的轻 云尽管变透明 我唱歌给你听",7.4],
[39.05,"你温柔的眼睛胜过闪烁繁星 ⼼动怎么喊停",7.9],
[48.29,"我们就⼀直在⼀起在⼀起在⼀起好吗",4.7],
[53.07,"不⽌北⽅的冬天丽江古城的夏",4.2],
[58.01,"默契不需太多话爱情的魔法",3.8],
[62.64,"明⽬张胆偏爱无时差",2.4],
[66.02,"我们就⼀直在⼀起在⼀起在⼀起好吗",4.9],
[71.44,"不管世界的喧哗晚风吹落的花",3.7],
[76.11,"千千万万遍⼼动⼿写的童话",3.6],
[80.46,"⼀直在⼀起好吗",2.5],
[83.72,"",10.3],
[94.06,"我们⼀起去天台看星星 看落⽇河畔慢慢结成冰",7.9],
[103.01,"听老时钟滴答着岁⽉声 傍晚猫咪落地窗电影",6.7],
[110.99,"风尽管吹的轻 云尽管变透明 我唱歌给你听",7.7],
[120.05,"你温柔的眼睛胜过闪烁繁星 ⼼动怎么喊停",7.6],
[129.11,"我们就⼀直在⼀起在⼀起在⼀起好吗",4.7],
[134.33,"不⽌北⽅的冬天丽江古城的夏",3.6],
[138.63,"默契不需太多话爱情的魔法",3.8],
[143.35,"明⽬张胆偏爱无时差",2.6],
[147.12,"我们就⼀直在⼀起在⼀起在⼀起好吗",4.5],
[152.29,"不管世界的喧哗晚风吹落的花",3.6],
[156.59,"千千万万遍⼼动⼿写的童话",3.9],
[160.59,"一直在一起好吗",2.9]
];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/btnlrc.js';
document.querySelector('body').appendChild(sF);
Array.from({length: all = 0}).forEach((item,key) => {
item = document.createElement('ye-zi');
item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`;
btnplay.prepend(item);
});
</script>
|
