绿叶清舟 发表于 2023-5-21 11:17

小满


<css-doodle grid="1" id="mplayer">
      :doodle {
                @size: 1100px 700px;
                background: url('https://pic1.imgdb.cn/item/64698d3be03e90d8740d51b0.jpg') no-repeat center/cover;
                box-shadow: 0 0 6px #000;
                position: relative;
                margin: 0 0 0 calc(50% - 633px);
                z-index: 1;
                --state: paused;
      }
      @size: 100px;
      clip-path: @shape(
                points: 200;
                scale: .3;
                x: 2 * cos(3t) + cos(t);
                y: 2 * sin(t) + sin(2t);
      );
      position: absolute;
      background: rgb(@m3(@r(255)));
      offset-path: path('M212 180a300 120 0 1 0 600 0a300 120 0 1 0 -600 0z');
      animation: move 40s infinite linear var(--state);
      cursor: pointer;
      @keyframes move { to { offset-distance: 100%;} }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1296494407" autoplay="autoplay" loop="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>

醉美水芙蓉 发表于 2023-5-21 11:28

绿叶清舟 发表于 2023-5-21 11:36

醉美水芙蓉 发表于 2023-5-21 11:28
清舟做贴真快！

芙蓉好，这个简单啊

顾-念 发表于 2023-5-21 12:41

看着图 仿佛回到了小时候。真好！

红影 发表于 2023-5-21 14:17

这个制作好可爱，是黑黑的新效果呢。清舟真快。欣赏好帖{:4_187:}

马黑黑 发表于 2023-5-23 07:44

小满呢{:4_170:}

小九 发表于 2023-6-5 10:05

又过了一年的小满
时光又晃了一圈
能否回到原点
回到那个快乐的时光
{:4_187:}

小满 发表于 2023-8-25 11:02

来了来了，484有点迟了{:5_117:}

小满 发表于 2023-8-25 11:05

看上去好凉快呀，丫头看上去有点淘气哟
然后那个F是什么，不知疲倦一样{:5_117:}

小满 发表于 2023-8-25 11:06

马黑黑 发表于 2023-5-23 07:44
小满呢

马好哦

马黑黑 发表于 2023-8-25 12:02

小满 发表于 2023-8-25 11:06
马好哦

{:4_190:}
页: [1]
查看完整版本: 小满