母亲

马黑黑 · 发表于 2023-5-14 09:25

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

: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); } }

马黑黑 · 发表于 2023-5-14 09:25

帖子完整代码

<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 = '/css-doodle.min.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>