绿叶清舟 发表于 2024-3-9 16:42

我的海洋


<css-doodle grid="3" id="mplayer">
      :doodle {
                @size: 1100px 700px;
                background: url('https://pic.imgdb.cn/item/65ebc3229f345e8d030d7a51.gif') no-repeat center/cover;
                background-blend-mode: lighten;
                box-shadow: 0 0 8px #000;
                position: relative;
                margin: -80px 0 0 calc(50% - 633px);
                z-index: 1;
                --state: paused;
      }
      @match(@i ≤ @size - 2) {
                @size: @r(50,100)px;
                @shape: @p(fish, whale);
                @place:50px 50px;
                background: rgba(@m3(@r(255)), .9);
                offset-path: path('M@r(200) @r(200), L@r(800,1000) @r(300), L@r(400,550) @r(500,640)Z');
                :after {
                        position:absolute;
                        content: '';
                        opacity: 0.3
                        right: 10px;
                        width: 10px;
                        height: 10px;
                        border-radius: 50%;
                        background: radial-gradient(black,snow);
                }
                animation: swim @r(10,30)s @r(-10, 0)s infinite ease-in-out var(--state);
      }
      @nth(@size) {
                @shape: bud 1;
                @size: 100px;
                @place: center 90%;
                background: rgba(200,20,20,.65);
                cursor: pointer;
                animation: rot 5s infinite linear var(--state);
      }
      @keyframes swim { to { offset-distance: 100%; } }
      @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1359523457" 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>

梦油 发表于 2024-3-9 17:15

这些小鱼倒是很可爱的。

南无月 发表于 2024-3-9 17:16

五彩缤纷的海底世界。。{:4_187:}美。。

千羽 发表于 2024-3-9 19:16

动画鱼更可爱，抓一条养起来{:4_173:}

樵歌 发表于 2024-3-9 20:15

海的女儿好美。{:4_189:}

红影 发表于 2024-3-9 20:49

doodle制作，都快忘了这个了，还好清舟用出来。
完全由代码制作的小鱼，好美的，而且每次刷新鱼群颜色都不同，这个很好{:4_187:}

红影 发表于 2024-3-9 20:51

鱼儿的眼睛是不是太后面了，往前调一下如何，不过，或者是新品种也说不定{:4_173:}

小文 发表于 2024-3-9 21:45

厉害

绿叶清舟 发表于 2024-3-10 19:38

红影 发表于 2024-3-9 20:51
鱼儿的眼睛是不是太后面了，往前调一下如何，不过，或者是新品种也说不定

核水喝多了基因突变来的{:4_189:}

绿叶清舟 发表于 2024-3-10 19:38

小文 发表于 2024-3-9 21:45
厉害

谢谢小文，晚上好

绿叶清舟 发表于 2024-3-10 19:38

红影 发表于 2024-3-9 20:49
doodle制作，都快忘了这个了，还好清舟用出来。
完全由代码制作的小鱼，好美的，而且每次刷新鱼群颜色都不 ...

在翻作业来的{:4_189:}

绿叶清舟 发表于 2024-3-10 19:39

千羽 发表于 2024-3-9 19:16
动画鱼更可爱，抓一条养起来

养大了叫俺一声啊{:4_189:}

绿叶清舟 发表于 2024-3-10 19:40

樵歌 发表于 2024-3-9 20:15
海的女儿好美。

明天钓个回去{:4_189:}

绿叶清舟 发表于 2024-3-10 19:41

梦油 发表于 2024-3-9 17:15
这些小鱼倒是很可爱的。

小丑鱼{:4_173:}

红影 发表于 2024-3-10 20:36

绿叶清舟 发表于 2024-3-10 19:38
核水喝多了基因突变来的

都怪小日本倾倒核废料，这下看到结果了{:4_189:}

红影 发表于 2024-3-10 20:37

绿叶清舟 发表于 2024-3-10 19:38
在翻作业来的

清舟真棒{:4_187:}

绿叶清舟 发表于 2024-3-10 21:05

红影 发表于 2024-3-10 20:36
都怪小日本倾倒核废料，这下看到结果了

就是啊，有看到一张表，天津舟山都有数据出来了不知道真假的

红影 发表于 2024-3-10 21:37

绿叶清舟 发表于 2024-3-10 21:05
就是啊，有看到一张表，天津舟山都有数据出来了不知道真假的

应该让小日本赔偿。

梦油 发表于 2024-3-11 14:18

绿叶清舟 发表于 2024-3-10 19:41
小丑鱼

这样的动画鱼比真鱼在设计上更美，更成功。

绿叶清舟 发表于 2024-3-12 19:15

红影 发表于 2024-3-10 21:37
应该让小日本赔偿。

是啊害了全世界了
页: [1] 2
查看完整版本: 我的海洋