帖子代码
<style>
#papa {
margin: 0 0 0 calc(50% - 721px);
width: 1280px;
height: 640px;
background: black;
z-index: 1;
position: relative;
}
#papa::before {
position: absolute;
content: '';
inset: 0;
background:
url('https://638183.freep.cn/638183/t24/webp/ulug.webp') no-repeat center/cover,
radial-gradient(pink,transparent,red);
background-blend-mode: multiply;
box-shadow: 3px 3px 8px #333;
}
#player {
margin: 60px;
width: 120px;
height: 120px;
cursor: pointer;
position: absolute;
animation: rot 6s linear infinite var(--state);
}
#player::before, #player::after {
position: absolute;
content: '';
width: 100%;
height: 50%;
background:
repeating-radial-gradient(circle, transparent, snow, transparent 8px),
repeating-linear-gradient(to right, orange, white, orange 4px);
clip-path: polygon(0 100%, 28% 56%, 50% 56%, 50% 0, 72.5% 56%, 72.5% 100%);
}
#player::after {
top: 50%;
transform: rotate(180deg);
}
#vid {
position: absolute;
width: 240px;
height: 240px;
object-fit: cover;
border-radius: 50%;
pointer-events: none;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5248767" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4" loop muted></video>
<div id="player"></div>
</div>
<script>
var mState = () => aud.paused
? (papa.style.setProperty('--state','paused'), vid.pause())
: (papa.style.setProperty('--state','running'), vid.play());
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
| 
发表于 2024-3-3 08:33
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-3-3 13:17