本帖最后由 花简静 于 2024-8-18 15:14 编辑
<css-doodle id="mplayer">
:doodle {
@grid: 4 / 993px 662px;
background: gray url('https://638183.freep.cn/638183/t23/1/mama.jpg');
position: relative;
margin: 0 0 0 calc(50% - 577.5px);
z-index: 1;
--state: paused;
}
@size: @r(40,100)px;
@place: @r(5,90)% @r(5,20)%;
background: rgba(@m3(@r(255)), @r(.6,.9));
clip-path: @shape(
points: 360;
r: abs.sin.tan(sin(1.5t)*1.14);
);
@nth(@size) {
@size: 160px;
@place: center;
cursor: pointer;
}
animation: rot @r(3,6)s infinite linear var(--state);
@keyframes rot {to {transform: rotate(@p(-360,360)deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=560463082" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
let mState = () => mplayer.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>
| 
.gif)
