帖子代码
<style>
#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
box-shadow: 3px 3px 6px gray;
overflow: hidden;
position: relative;
}
#player {
top: 20px;
right: 20px;
width: 200px;
height: 200px;
cursor: pointer;
position: absolute;
}
#player::before, #player::after {
position: absolute;
content: '';
}
#player::before {
inset: 0;
clip-path: path('M110.00 100.00 147.50 182.27 95.00 108.66 5.00 100.00 95.00 91.34 147.50 17.73z');
background: radial-gradient(green,red);
animation: rot 5s linear infinite var(--state);
}
#player::after {
inset: -5px;
border: 8px dashed green;
border-radius: 50%;
animation: rot 7s linear infinite var(--state);
}
#papa video {
position: absolute;
top: -60px;
width: 100%;
height: 700px;
object-fit: cover;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1615339" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2422006/00/01/94/5b4fdb26cf95b.mp4" loop muted></video>
<div id="player"></div>
</div>
<script>
var vids = document.querySelectorAll('.vid');
var vidplay = (play) => vids.forEach(vid => play ? vid.play() : vid.pause());
var mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vidplay(false)) : (papa.style.setProperty('--state', 'running'), vidplay(true));
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
| 
发表于 2024-2-25 12:45
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-2-25 18:42
刚试了几种，没试出更合适的