<style>
#papa {
	margin: auto;
	width: 1024px;
	height: 640px;
	background: lightblue url('https://638183.freep.cn/638183/t23/1/xkxi.webp') center/cover no-repeat;
	box-shadow: 6px 3px 30px #000;
	position: relative;
	display: grid;
	place-items: center;
	z-index: 1;
}
#mplayer {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: lightblue;
	box-shadow: 5px 5px 30px black inset;
	cursor: pointer;
	animation: rot2d 8s infinite linear var(--state);
	position: absolute;
	transition: box-shadow .6s;
	--state: running;
}
#mplayer::before, #mplayer::after {
	position: absolute;
	content: '';
	top: -50px;
	right: -50px;
	bottom: -50px;
	left: -50px;
	border: 6px dotted snow;
	border-radius: inherit;
	transform: perspective(1000px) rotateY(45deg) rotateX(15deg);
	animation: rot3d 10s infinite linear;
	--angle: 360deg;
}
#mplayer:hover {
	box-shadow: 5px 5px 60px blue inset;
}
#mplayer::after {
	top: -60px;
	right: -60px;
	bottom: -60px;
	left: -60px;
	--angle: -1080deg;
}
#papa:fullscreen #mplayer {
	width: 150px;
	height: 150px;
}
#papa:fullscreen #mplayer::before {
	top: -70px;
	right: -70px;
	bottom: -70px;
	left: -70px;
}
#papa:fullscreen #mplayer::after {
	top: -80px;
	right: -80px;
	bottom: -80px;
	left: -80px;
}
@keyframes rot2d {
	to { transform: rotate(360deg); }
}
@keyframes rot3d {
	to { transform: perspective(1000px) rotateY(45deg) rotateX(15deg) rotateZ(var(--angle)); }
}
</style>

<div id="papa">
	<div id="mplayer"></div>
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1939229183" autoplay loop></audio>
</div>

<script src="../../api/fullscreen.js"></script>
<script>
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'pasued' : 'running');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
FS({pa: papa, set: 'color: snow; background: none; border: 2px solid snow; bottom: 20px;'});
</script>

前一篇: 爱的命运
下一篇: 海浪（小海螺播放效果）