|
|

楼主 |
发表于 2023-5-31 07:49
|
显示全部楼层
帖子代码
- <css-doodle grid="3" id="mplayer">
- :doodle {
- @size: 1024px 600px;
- background: #eee url('https://638183.freep.cn/638183/t23/webp1/61c.webp') no-repeat center/cover;
- box-shadow: 0 0 6px #000;
- position: relative;
- margin: 0 0 0 calc(50% - 593px);
- opacity: .95;
- z-index: 1;
- --state: paused;
- }
- @nth(1) {
- @size: 100%;
- position: absolute;
- background-image: @svg(
- viewBox: 0 0 10 10;
- stroke: rgba(0,100,0,.45);
- stroke-width: .05;
- stroke-linecap: round;
- line*20x20 {
- x1, y1, x2, y2: @p(
- @nx(-1) @ny(-1) @nx @ny,
- @nx @ny(-1) @nx(-1) @ny,
- @nx @ny(-1) @nx @ny
- );
- }
- );
- }
- @match(i ≥ 2 && i ≤ @size - 1) {
- @size: 200px;
- @place: @r(100, 920)px @r(100, 540)px;
- background: @doodle(
- @grid: 6x1 / 200px;
- @place: @plot(r: .3; dir: auto - 120);
- @size: 50%;
- border-radius: 50%;
- box-shadow: @r(20,40)px 0 0 -10px rgb(@m3(@r(255)));
- );
- cursor: pointer;
- animation: rot @r(4,8)s infinite linear var(--state);
- }
- @nth(@size) {
- @size: 120px;
- @place: 70% 578px;
- font-size: 40px;
- :after { content: '👨‍👩‍👧‍👦';}
- }
- @keyframes rot { to { transform: rotate(360deg); } }
- </css-doodle>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1359463526" autoplay="autoplay" loop="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>
复制代码
|
|