红影 发表于 2023-5-23 22:16

《海和鱼》（把黑黑帖子里的鱼群借过来）

<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://img.tukuppt.com/video_show/2629112/00/02/35/5b571cb428202_10s_big.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 - 1) {
                @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) {
                @size: 120px;
                @place: center 78%;
                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);
      }
      @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-23 22:17

觉得海底太空了点，放了点海草，省得借来的鱼饿到了{:4_173:}
谢谢@马黑黑 的代码{:4_187:}

红影 发表于 2023-5-23 22:19

本来想全部用@shape:whale的，发现鱼好像有点胖了，还是用黑黑的那个两种鱼的原设计吧{:4_173:}

醉美水芙蓉 发表于 2023-5-23 22:50

朵拉 发表于 2023-5-23 23:10

漂亮的海底世界，影宝棒棒哒{:4_204:}

马黑黑 发表于 2023-5-23 23:31

红影 发表于 2023-5-23 22:17
觉得海底太空了点，放了点海草，省得借来的鱼饿到了
谢谢@马黑黑 的代码

海草放的特别好

亦是金 发表于 2023-5-23 23:40

欣赏美帖！收藏学习备用！{:4_187:}

焱鑫磊 发表于 2023-5-23 23:57

欣赏美帖！放海草没错，漂亮！但鱼吃不了海草，别忘了喂鱼食哟！{:4_170:}

焱鑫磊 发表于 2023-5-24 00:00

醉美水芙蓉 发表于 2023-5-23 22:50
这个播放器很美！我就是不会歌词同步播放器！

有歌曲、有歌词，同步不难，可以制作同步歌词。{:4_187:}

起个网名好难 发表于 2023-5-24 08:04

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

小文 发表于 2023-5-24 08:10

太漂亮了，好有才哦！

梦油 发表于 2023-5-24 10:21

海草和气泡为整个画面增添了生气。

梦缘 发表于 2023-5-24 10:59

谢谢老师的分享，欣赏问好！{:4_204:}

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

醉美水芙蓉 发表于 2023-5-23 22:50
这个播放器很美！我就是不会歌词同步播放器！

看到水芙蓉美女今天的歌词同步了，做得很好的啊{:4_187:}

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

朵拉 发表于 2023-5-23 23:10
漂亮的海底世界，影宝棒棒哒

学习黑黑用代码做鱼群{:4_173:}

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

马黑黑 发表于 2023-5-23 23:31
海草放的特别好

今天醒早了，本来想学你《夜雨》帖子弄了3个转轮上去。做完发现也不好看。所以就没换上，还是这样了。白折腾半天{:4_173:}

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

亦是金 发表于 2023-5-23 23:40
欣赏美帖！收藏学习备用！

问好亦是金老师，感谢您的鼓励{:4_187:}

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

焱鑫磊 发表于 2023-5-23 23:57
欣赏美帖！放海草没错，漂亮！但鱼吃不了海草，别忘了喂鱼食哟！

哈哈，这个品种是草鱼，专门吃草的。当然鱼食它们肯定更喜欢{:4_173:}

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

起个网名好难 发表于 2023-5-24 08:04


感谢难难老师鼓励{:4_187:}

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

小文 发表于 2023-5-24 08:10
太漂亮了，好有才哦！

只是学了个新的代码表现形式。谢谢小文鼓励{:4_187:}
页: [1] 2 3 4 5 6 7 8
查看完整版本: 《海和鱼》（把黑黑帖子里的鱼群借过来）