|
|

楼主 |
发表于 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>
复制代码
|
|