本帖最后由 花简静 于 2024-8-18 15:39 编辑
<style>
#papa {
margin: 130px 0 30px calc(50% - 690px);
width: 1200px;
height: 1700px;
background: url('https://642303.freep.cn/642303/tu/20240725haidi.webp') no-repeat center/cover;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,.5);
z-index: 1;
position: relative;
}
#player {
position: absolute;
top: -20px;
left: calc(50% - 180px);
width: 380px;
height: 380px;
border-radius: 50%;
cursor: pointer;
transform: rotateX(-70deg);
--tt: 6s;
border: 16px ridge MediumTurquoise;
opacity: 0.8;
}
#player::before, #player::after {
position: absolute;
content: '';
border: inherit;
border-radius: inherit;
animation: rot var(--tt) linear infinite var(--state);
}
#player::before {
inset: 40px;
border-color: transparent RoyalBlue;
}
#player::after {
inset: 80px;
border-width: 90px;
border-style: dashed;
--tt: 4s;
}
li-zi {
position: absolute;
width: 15px;
height: 40px;
border-radius: 50%;
box-shadow: inset 0 0 10px RoyalBlue;
z-index:5;
}
@keyframes moving {
from { transform: translateY(0); opacity: 1;filter: hue-rotate(0deg); }
to { transform: translateY(2400px); opacity: 0; filter: hue-rotate(0deg);}
}
@keyframes rot { to { transform: rotate(360deg); } }
#vid1 {
position: absolute;
width: 100%;
height: 50%;
bottom:0px;
filter: hue-rotate(10deg);
opacity: .89;
object-fit: cover;transform: rotateY(180deg);
-webkit-mask: linear-gradient(0deg, red 20%, transparent 55%, transparent);
}
#vid2 {
position: absolute;
width: 100%;
height:80%;
top:80px;
filter: hue-rotate(10deg);
opacity: .89;
object-fit: cover;transform: rotateX(180deg);
mix-blend-mode: multiply;
-webkit-mask: linear-gradient(0deg, red 20%, transparent 55%, transparent);
}
#tit {
position: absolute;
top:0px;
right: 4%;
background-image:url('https://pic.imgdb.cn/item/65a377bd871b83018ac3682a.gif');
background-size:cover;
width:80px; height:1520px;
font: bold 2.4em sans-serif;
text-align:center;
line-height:50px;
color:transparent;writing-mode:vertical-rl;
-webkit-background-clip:text;
}
</style>
<div id="papa">
<div id="tit">《烟雨青黛》-黑师《Moola Mantra》粒子飞舞 TO：杨帆</div>
<video id="vid1" src="https://img.tukuppt.com/video_show/2405811/00/01/98/5b4eb65467857.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/2475824/00/01/49/5b4423c9b06bf.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=19277603" autoplay loop></audio>
<div id="player" title="播放/暂停" class="loading"></div>
</div>
<script>
var all = 108;
for(var i = 0; i < all; i++) {
var lz = document.createElement('li-zi');
lz.style.cssText += `
left: ${ 60 + Math.floor(Math.random() * 160)}px;
top: ${ 60 + Math.floor(Math.random() * 160)}px;
background: #${Math.random().toString(16).substring(2,8)};
animation: moving ${Math.random() * 4 + 4}s -${Math.random() * 4}s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite var(--state);
`;
player.prepend(lz);
}
var mState = () => {
papa.style.setProperty('--state', ['running','paused'][+aud.paused]);aud.paused ?(vid1.pause(),vid2.pause()) :(vid1.play(), vid2.play());
player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
| 
