小辣椒 发表于 2023-6-28 22:01

小小水仙花（学习黑黑雾里看花效果）


<css-doodle grid="3x1" id="mplayer">
      :doodle {
                @size: 1283px 756px;left: -340px;top:150px;
                background: tan url('https://xlaj.cn/assets/file/zp/20230628214424.gif ') no-repeat center / cover;
                box-shadow: 0 0 6px #000;
                position: relative;
                filter: blur(1px) opacity(.95);
                z-index: 1;
                margin: 0 0 0 calc();
                --state: paused;
      }
      clip-path: @shape(
                points: 300;
                r: cos(@pn(5,4,2)t);
      );
      background: radial-gradient(Yellow, White, Azure);
      @nth(1,3) {
                @size: 80px;
                @place: 60px 60px;left: 380px;top:150px;
                cursor: pointer; animation: rot 6s infinite linear var(--state);
      }
      @nth(2) { @size: 60px; @place: 72% 22%; }
      @nth(3) { @size: 160px; @place: 20% 36%; }
      @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>

<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230628214503.mp3" 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>
<br><br><br><br><br><br><br><br>

小辣椒 发表于 2023-6-28 22:01

@马黑黑

黑黑好久没有做作业了，这个简单一点就学习做一次

小辣椒 发表于 2023-6-28 22:02

@走过岁月

谢谢岁月的水仙花粒子效果

梦缘 发表于 2023-6-28 22:04

好美的帖，欣赏点赞！{:4_204:}

小辣椒 发表于 2023-6-28 22:10

梦缘 发表于 2023-6-28 22:04
好美的帖，欣赏点赞！

谢谢梦缘欣赏，晚上好··{:4_171:}

马黑黑 发表于 2023-6-28 22:12

css-doodle还是炫酷的

醉美水芙蓉 发表于 2023-6-28 22:33

红影 发表于 2023-6-28 22:37

这个播放器跟图片背景非常协调，欣赏亲爱的好制作{:4_199:}

岩新新 发表于 2023-6-29 07:16

欣赏精彩制作！

顾-念 发表于 2023-6-29 09:29

水灵 好看，点赞！

梦油 发表于 2023-6-29 15:42

欣赏佳作，问候小辣椒。{:4_204:}

走过岁月 发表于 2023-7-2 12:38

小辣椒 发表于 2023-6-28 22:02
@走过岁月

谢谢岁月的水仙花粒子效果

来欣赏了

走过岁月 发表于 2023-7-2 12:39

小花是播放按钮，不错

走过岁月 发表于 2023-7-2 12:39

欣赏小辣椒的作品，好棒

小辣椒 发表于 2023-7-3 18:52

走过岁月 发表于 2023-7-2 12:38
来欣赏了

岁月难得看见你了{:4_198:}

小辣椒 发表于 2023-7-3 18:53

走过岁月 发表于 2023-7-2 12:39
小花是播放按钮，不错

岁月一看就明白的{:4_187:}

小辣椒 发表于 2023-7-3 18:53

走过岁月 发表于 2023-7-2 12:39
欣赏小辣椒的作品，好棒

谢谢岁月的鼓励{:4_179:}

小文 发表于 2023-7-3 19:00

好漂亮呀！欣赏不已！{:4_187:}

小辣椒 发表于 2023-7-4 13:38

小文 发表于 2023-7-3 19:00
好漂亮呀！欣赏不已！

谢谢小文欣赏{:4_187:}
页: [1]
查看完整版本: 小小水仙花（学习黑黑雾里看花效果）