本帖最后由 花简静 于 2024-8-18 15:30 编辑
<style>
#papa {
position: relative;
margin: 20px 0 20px calc(50% - 931px);
width: 1700px;
height: 900px;
background: url('https://642303.freep.cn/642303/tu/20240524yao1.webp') no-repeat center/cover;
box-shadow: 2px 2px 6px #333;
overflow: hidden;
--state: running;
}
#mama { position: absolute; width: 800px; height: 200px;left:380px;top:200px; }
.text{ font-size: 64px; font-weight: bold; fill: none; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; }
.text-1{ stroke: #3498db; text-shadow: 0 0 5px #3498db; animation-delay: -1.5s; }
.text-2{ stroke: #f39c12; text-shadow: 0 0 5px #f39c12; animation-delay: -3s; }
.text-3{ stroke: #e74c3c; text-shadow: 0 0 5px #e74c3c; animation-delay: -4.5s; }
.text-4{ stroke: #9b59b6; text-shadow: 0 0 5px #9b59b6; animation-delay: -6s; }
@keyframes stroke { to { stroke-dashoffset: -400; } }
.vid {
position: absolute;bottom: 0;left:0px;
width: 100%;
height: calc(100% + 85px);
object-fit: cover;
mix-blend-mode: screen; opacity: .9;
}
.vid:nth-of-type(2) { position: absolute;bottom: 0;left:0px;
width: 100%;
height: calc(100% + 85px);
object-fit: cover;
mix-blend-mode: screen; opacity: .4; }
.vid:nth-of-type(3) {
position: absolute;
border-radius: 50%;
top: 20px;
left:500px;
width: 30%;
height:30%;
object-fit: cover;
mix-blend-mode: screen;opacity: .99;
}
.player {
position: absolute;
left: 1315px;
top: 700px;
width: 120px;
height: 120px;
border-radius: 50%;
border: 6px groove tan;
border-color: black white black;
opacity: .9;
transition: 1s;
cursor: pointer;
}
.player:hover {
position: absolute;
filter: hue-rotate(100deg) drop-shadow(0 0 30px red);
border-color: purple red plum;
}
.player::before, .player::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: radial-gradient(snow, purple, pink, lightblue, transparent);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
animation: rot 8s linear infinite var(--state);
}
.player::after { animation-delay: -1s; }
.player:nth-of-type(2) { left: 25px;
top: 760px; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/04/02/f5c7f3209b4251b698fff5cb8785a2f5.mp3" autoplay loop></audio>
<div id="mama">
<svg width="100%" height="100%" style="border: 0px solid">
<text text-anchor="middle" x="50%" y="50%" class="text text-1">祝若依夜风生日快乐</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-2">祝若依夜风生日快乐</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-3">祝若依夜风生日快乐</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-4">祝若依夜风生日快乐</text>
</svg>
</div>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/33/69/62f0d6e506540.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/02/06/5b50065e45b04.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/41/5b42c3cfabbe3.mp4" loop muted></video>
<div class="player" title="播放/暂停"></div>
<div class="player" title="播放/暂停"></div>
</div>
<script>
var players = document.querySelectorAll('.player'), vids = document.querySelectorAll('.vid');
aud.onplaying = aud.onpause = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
</script>
<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: '.player',
lrc_css: 'left: 44%; transform: translate(-50%);bottom: 26px; --bg: linear-gradient(rgba(250,250,250,.25),rgba(100,200,250,.65)); opacity: .6;font-size: 36px;color: #fff;',
});
};
let geci = [
[1.95,"单曲：桃花诺",2.4],
[4.37,"电视剧《上古情歌》片尾曲",2.8],
[7.13,"歌手：G.E.M.邓紫棋",1.8],
[8.94,"祝若依夜风生日快乐！",1.6],
[10.5,"作词 : 张赢",1.4],
[11.9,"作曲 : 罗锟",2.4],
[14.29,"祝若依夜风生日快乐！",2.3],
[16.61,"学习黑师2024《半妖倾城》双视频双小播效果",2.9],
[19.47,"初见若缱绻 誓言 风吹云舒卷",6.7],
[26.8,"岁月间 问今夕又何年",5.1],
[33.28,"心有犀但愿 执念 轮回过经年",6.6],
[40.38,"弹指间 繁花开落多少遍",5.0],
[47.04,"这一世牵绊 纠结 触动了心弦",6.5],
[54.1,"下一世 不知可否再见",5.0],
[60.02,"留一片桃花 纪念 了却浮生缘",7.1],
[67.79,"眉目间 还有我的思念",5.8],
[74.03,"一寸土 一年木 一花一树一贪图",6.9],
[81.58,"情是种 爱偏开在迷途",5.0],
[88.47,"忘前路 忘旧物 忘心忘你忘最初",6.2],
[95.27,"花斑斑 留在爱你的路",5.1],
[115.04,"这一世牵绊 纠结 触动了心弦",7.0],
[122.59,"下一世 不知可否再见",5.3],
[129.07,"留一片桃花 纪念 了却浮生缘",4.7],
[133.78,"眉目间 还有我的思念",8.5],
[143.25,"一寸土 一年木 一花一树一贪图",6.2],
[150.08,"情是种 爱偏开在迷途",5.6],
[156.97,"忘前路 忘旧物 忘心忘你忘最初",6.3],
[163.7,"花斑斑 留在爱你的路",5.1],
[170.34,"虔诚夙愿 来世路",3.1],
[174.03,"一念桃花因果渡",2.9],
[177.51,"那一念 几阙时光在重复",5.1],
[184.41,"听雨书 望天湖 人间寥寥情难诉",6.2],
[191.13,"回忆斑斑 留在爱你的路",5.1]
];
</script>
<br><br><br><br><br><br>
|
