论坛 › 欢乐水吧 › 《海和鱼》（把黑黑帖子里的鱼群借过来）

红影 发表于 2023-5-24 11:14

<style>
#papa {
        margin: 80px 0 0 calc(50% - 681px);
        width: 1200px;
        height: 700px;
        background: tan;
        box-shadow: 0 0 10px gray;
      position: relative;
        --state: paused;
}
.vid { position: absolute; width: 1200px; height: 700px;object-fit: cover; opacity: 1; }
.mypic { position: absolute; width: 400px; height: 182px;left: 0px;bottom: 0px; }
.mypic1 { position: absolute; width: 400px; height: 182px;left: 400px;bottom: 0px; }
.mypic2 { position: absolute; width: 400px; height: 182px;left: 800px;bottom: 0px; }
</style>
<div id="papa">
<video class="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/13/78/V-137874-BCA94CE3.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<img class="mypic" src="https://pic1.imgdb.cn/item/646cb84f0d2dde5777e1d8b1.gif" alt="" />
<img class="mypic1" src="https://pic1.imgdb.cn/item/646cb84f0d2dde5777e1d8b1.gif" alt="" />
<img class="mypic2" src="https://pic1.imgdb.cn/item/646cb84f0d2dde5777e1d8b1.gif" alt="" />

<css-doodle grid="5" id="mplayer">
:doodle {
              @size: 1200px 700px;
              z-index: 1;
              --state: paused;
    }
       @match(i ≤ @size - 3) {
                @size: @r(40,110)px;
                position: absolute;
                @shape: @p(fish, whale);
                @place:50px 50px;
                background: SlateBlue;
                offset-path: path('M@r(200) @r(200,400), L@r(500,700) @r(300), L@r(1000,1160) @r(200,400), L@r(400,550) @r(300,460)Z');
                :after {
                        position:absolute;
                        content: '';
                        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 - 2, @size - 1,@size){
                @size: 110px;
                @place: center 82%;
                background: rgba(0,255,0,.75);
                cursor: pointer;
                clip-path: @shape(
                        points: 300;
                        scale: .7;
                        r: cos.cos.cos.cos.cos(7t) ^ cos(7t);
                );
                animation: rot 5s infinite linear var(--state);
      }
      @nth(@size - 1) { @size: 90px; @place: 48% 72%; }
      @nth(@size) { @size: 80px; @place: 54% 73%; }
      @keyframes swim { to { offset-distance: 100%; } }
      @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1992603664" autoplay loop></audio>
<script>
(function() {
    let vid = document.querySelector('.vid');
    let script = document.createElement('script');
    script.src = '/css-doodle.min.js';
    document.head.appendChild(script);
    let mState = () => aud.paused ? (mplayer.style.setProperty('--state', 'paused'), vid.pause()) : (mplayer.style.setProperty('--state', 'running'), vid.play());   
    aud.addEventListener('play', mState, false);
    aud.addEventListener('pause', mState, false);
    mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

红影 发表于 2023-5-24 11:14

翻页了，先把3个转轮的拿过来留存。

红影 发表于 2023-5-24 11:15

梦油 发表于 2023-5-24 10:21
海草和气泡为整个画面增添了生气。

就是跟在后面学习新代码好玩呢{:4_173:}

红影 发表于 2023-5-24 11:15

梦缘 发表于 2023-5-24 10:59
谢谢老师的分享，欣赏问好！

谢谢梦缘的鼓励，中午好{:4_187:}

醉美水芙蓉 发表于 2023-5-24 11:45

马黑黑 发表于 2023-5-24 12:11

红影 发表于 2023-5-24 11:10
今天醒早了，本来想学你《夜雨》帖子弄了3个转轮上去。做完发现也不好看。所以就没换上，还是这样了。白 ...

也是试过才知道好不好

梦油 发表于 2023-5-24 14:48

红影 发表于 2023-5-24 11:15
就是跟在后面学习新代码好玩呢

做得真好。

南无月 发表于 2023-5-24 17:52

极有特色的海底世界，身临其境的感觉，三个转轮的也很漂亮{:4_187:}

小辣椒 发表于 2023-5-24 18:05

红影 发表于 2023-5-24 11:14
#papa {
        margin: 80px 0 0 calc(50% - 681px);
        width: 1200px;


亲爱的，居然还一带二，发了二个，这个是齿轮播放器按钮{:4_199:}

小辣椒 发表于 2023-5-24 18:08

是视频背景吧，小鱼儿自由自在的游，亲爱的好制作{:4_178:}

红影 发表于 2023-5-24 18:49

醉美水芙蓉 发表于 2023-5-24 11:45
我是说你的这个播放器我做不出来，试了几次了！

这个齿轮播放器么，我去帖子里看了一下：就是这个

                        points: 300;
                        scale: .7;
                        r: cos.cos.cos.cos.cos(7t) ^ cos(7t);

红影 发表于 2023-5-24 18:50

马黑黑 发表于 2023-5-24 12:11
也是试过才知道好不好

我翻页后放上去，你看看好不好{:4_173:}

红影 发表于 2023-5-24 18:51

梦油 发表于 2023-5-24 14:48
做得真好。

就是玩啊，这么多的鱼都是代码弄出来的{:4_173:}

红影 发表于 2023-5-24 18:52

南无月 发表于 2023-5-24 17:52
极有特色的海底世界，身临其境的感觉，三个转轮的也很漂亮

谢谢月儿，月儿弄了个这么可爱的头像啊{:4_173:}

红影 发表于 2023-5-24 18:53

小辣椒 发表于 2023-5-24 18:05
亲爱的，居然还一带二，发了二个，这个是齿轮播放器按钮

我只是试了一下多加两个会怎样{:4_173:}

红影 发表于 2023-5-24 18:54

小辣椒 发表于 2023-5-24 18:08
是视频背景吧，小鱼儿自由自在的游，亲爱的好制作

背景是视频，里面的鱼、水草、还有齿轮都是黑黑的代码。
亲爱的上来了，身体好点么{:4_179:}

红影 发表于 2023-5-24 18:56

小辣椒 发表于 2023-5-24 18:08
是视频背景吧，小鱼儿自由自在的游，亲爱的好制作

对了，刚才看到有声有色老师送了个动图，给亲爱的看看

https://pic1.imgdb.cn/item/646d7a820d2dde57779c47fc.gif

马黑黑 发表于 2023-5-24 19:08

红影 发表于 2023-5-24 18:50
我翻页后放上去，你看看好不好

好

红影 发表于 2023-5-24 19:27

马黑黑 发表于 2023-5-24 19:08
好

真回复太敷衍了{:4_170:}

小辣椒 发表于 2023-5-24 19:36

红影 发表于 2023-5-24 18:54
背景是视频，里面的鱼、水草、还有齿轮都是黑黑的代码。
亲爱的上来了，身体好点么

身体很好的，就眼睛不好，看东西糊{:4_198:}

查看完整版本: 《海和鱼》（把黑黑帖子里的鱼群借过来）