南无月 发表于 2023-5-30 21:16

六一快乐（学习黑黑师《雾里看花》小播效果）

本帖最后由 南无月 于 2023-5-31 17:59 编辑 <br /><br /><css-doodle grid="3x1" id="mplayer">
      :doodle {
                @size: 1024px 640px;
                background: tan url('https://pic.imgdb.cn/item/6475f285f024cca173ba44c1.jpg') no-repeat center / cover;
                box-shadow: 0 0 6px #000;
                position: relative;

                z-index: 1;
                margin: 0 0 0 calc(50% - 593px);
                --state: paused;
      }
      clip-path: @shape(
                points: 360;
scale: .3;
-y: cos(5t) + cos(2t) + cos(5t);
x: sin(5t) + sin(4t) + sin(3t);
      );
      background: radial-gradient(red, GoldEnrod, lightgreen);
      @nth(1,2,3) {
                @size: 100px;
                @place: 660px 560px;
                cursor: pointer; animation: rot 6s infinite linear var(--state);
      }
      @nth(2) { @size: 50px; @place: 74% 40%; }
      @nth(3) { @size: 160px; @place: 18% 26%; }
      @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=497409815" 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>

南无月 发表于 2023-5-30 21:16

{:4_170:}马上过节了，快乐一下哈。。。

千羽 发表于 2023-5-30 21:27

哈哈，胖嘟嘟的小人儿好可爱{:4_187:}

千羽 发表于 2023-5-30 21:28

播放器是一苹果吗，有趣{:4_173:}

南无月 发表于 2023-5-30 21:31

千羽 发表于 2023-5-30 21:27
哈哈，胖嘟嘟的小人儿好可爱

刚找了两张小小人的图，拿来做个贴子{:4_170:}好看不

南无月 发表于 2023-5-30 21:31

千羽 发表于 2023-5-30 21:28
播放器是一苹果吗，有趣

苹果呀，小丫头手里也拿一个{:4_170:}

千羽 发表于 2023-5-30 21:33

是套装啊，大小两个旋转的红苹果播放器，是一大看点{:4_187:}

南无月 发表于 2023-5-30 21:35

千羽 发表于 2023-5-30 21:33
是套装啊，大小两个旋转的红苹果播放器，是一大看点

套的代码呀。。三个一起转的。。。

小辣椒 发表于 2023-5-30 21:36

哇塞~~速度的，黑黑的教程我刚看见，这里已经出来了{:4_199:}

南无月 发表于 2023-5-30 21:38

小辣椒 发表于 2023-5-30 21:36
哇塞~~速度的，黑黑的教程我刚看见，这里已经出来了

这个套用的呀，只改了个小播样子{:4_173:}

小辣椒 发表于 2023-5-30 21:38

非常漂亮，效果也是不错，好可爱的宝宝，欣赏南无月好制作

南无月 发表于 2023-5-30 21:40

小辣椒 发表于 2023-5-30 21:38
非常漂亮，效果也是不错，好可爱的宝宝，欣赏南无月好制作

红影比较换欣赏童谣{:4_170:}@红影

小辣椒 发表于 2023-5-30 21:41

南无月 发表于 2023-5-30 21:38
这个套用的呀，只改了个小播样子

我看出来的

罗浮梦 发表于 2023-5-30 21:42

好看好看

南无月 发表于 2023-5-30 21:44

小辣椒 发表于 2023-5-30 21:41
我看出来的

{:4_199:}嗯嗯

南无月 发表于 2023-5-30 21:44

罗浮梦 发表于 2023-5-30 21:42
好看好看

我也觉得好看。晚上好啊

醉美水芙蓉 发表于 2023-5-30 22:08

红影 发表于 2023-5-30 22:10

南无月 发表于 2023-5-30 21:40
红影比较换欣赏童谣@红影

月儿厉害，这么快就做出来了。3个苹果的图案选得好，很适合儿童节。手里的那个位置最难调了，月儿辛苦了{:4_187:}

马黑黑 发表于 2023-5-30 22:20

楼猪猪六一节快乐

千羽 发表于 2023-5-30 22:28

南无月 发表于 2023-5-30 21:31
刚找了两张小小人的图，拿来做个贴子好看不

挺好看的，我现在挺懒的。要不也做一个{:4_173:}
页: [1] 2 3
查看完整版本: 六一快乐（学习黑黑师《雾里看花》小播效果）