<style>
#papa {
margin: auto;
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t23/1/gvld.jpeg') no-repeat center/cover;
box-shadow: 0 0 8px #000;
position: relative;
z-index: 1;
--state: paused;
}
css-doodle { position: absolute; }
</style>
<div id="papa">
<css-doodle grid="6" id="mplayer">
:doodle {
@size: 200px;
@shape: circle;
left: 10px;
top: 10px;
cursor: pointer;
z-index: 2;
animation: rot 6s infinite linear forwards var(--state);
}
border: @r(2px, 10px) solid hsla(calc(100 * @i()), 80%, 60%, @r(.6));
border-radius: 50%;
transform: scale(@r(6, 15));
@keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<css-doodle grid="20">
:doodle {
@size: 1024px 640px;
}
position: absolute;
left: @r(100)%;
top: -20%;
:after {
position: absolute;
content: "@p(✿,❁,❀,🌺,💮)";
color: snow;
font-size: @r(12, 40)px;
}
animation: fall @r(8,20)s @r(-6, 6)s infinite var(--state);
@keyframes fall {
0% { top: -20%; transform: rotate(0deg); }
100% {top: 120%; transform: rotate(360deg); }
}
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=544954253" autoplay loop></audio>
</div>
<script>
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>