绿叶清舟 发表于 2023-5-2 09:48

孤帆


<css-doodle grid="1x3" id="mplayer">
    :doodle {
      @size: 1100px 700px;
      background: url('https://pic2.imgdb.cn/item/644e2dda0d2dde5777e6e22b.jpg') no-repeat center/cover;
      pointer-events: none;
      margin: -80px 0 0 calc(50% - 633px);
      box-shadow: 0 0 8px #000;
      --state: paused;
    }
    @size: 200px;
    @place: 600px 110px;
    cursor: pointer;
    pointer-events: auto;
    @at(1,1) {
      background: gray linear-gradient(#d6c4bb,#8aa1a7,#d6c4bb);
      clip-path: @shape(
            points: 300;
            frame: 60;
            scale: .65;
            r: abs.cos(9t) ^ cos(9t);
      );
      animation: rot 6s infinite linear var(--state);
    }
    @at(1,2) {
      @size: 100px;
      @place: 730px 610px;
      background: linear-gradient(silver,#0d4056);
      clip-path: @shape(
            points: 720;
            scale: .4 .3;
            -y: cos(5t) + cos(3t) + cos(5t);
            x: sin(3t) + sin(3/t) + sin(2t);
      );
      transform-origin: bottom bottom;
      animation: swing .5s infinite alternate linear var(--state);
    }


    @keyframes rot { to { transform: rotate(1turn); } }
    @keyframes swing { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1816242788" autoplay loop></audio>

<script>
(function() {
    let script = document.createElement('script');
    script.src = 'https://unpkg.com/css-doodle@0.34.9/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>

马黑黑 发表于 2023-5-2 10:05

用css-doodle做帖还是很容易的吧？

梦油 发表于 2023-5-2 11:06

下面好像还有一个小帆船吧？

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

梦缘 发表于 2023-5-2 16:09

真不错的效果，欣赏问好！{:4_204:}

绿叶清舟 发表于 2023-5-2 18:11

梦缘 发表于 2023-5-2 16:09
真不错的效果，欣赏问好！

谢谢梦缘，节日好

绿叶清舟 发表于 2023-5-2 18:11

醉美水芙蓉 发表于 2023-5-2 11:45
还有个小的帆船在晃动！

是啊

绿叶清舟 发表于 2023-5-2 18:11

梦油 发表于 2023-5-2 11:06
下面好像还有一个小帆船吧？

是的，加了个的

绿叶清舟 发表于 2023-5-2 18:12

马黑黑 发表于 2023-5-2 10:05
用css-doodle做帖还是很容易的吧？

只是抄的啊

罗浮梦 发表于 2023-5-2 19:27

这蓝色调漂亮。

罗浮梦 发表于 2023-5-2 19:27

静静聆听好声音。

梦油 发表于 2023-5-2 20:26

绿叶清舟 发表于 2023-5-2 18:11
是的，加了个的

动感十足。

红影 发表于 2023-5-2 20:29

这个图案设计非常漂亮，清舟厉害了{:4_199:}

焱鑫磊 发表于 2023-5-2 21:57

欣赏佳作！{:4_187:}

马黑黑 发表于 2023-5-2 22:22

绿叶清舟 发表于 2023-5-2 18:12
只是抄的啊

你抽空把那几个教程过一遍，包括加餐的，一准会

绿叶清舟 发表于 2023-5-3 15:11

梦油 发表于 2023-5-2 20:26
动感十足。

看到这个效果去搜的歌了

绿叶清舟 发表于 2023-5-3 15:11

焱鑫磊 发表于 2023-5-2 21:57
欣赏佳作！

谢谢焱鑫磊

绿叶清舟 发表于 2023-5-3 15:11

马黑黑 发表于 2023-5-2 22:22
你抽空把那几个教程过一遍，包括加餐的，一准会

补课了啊

绿叶清舟 发表于 2023-5-3 15:11

红影 发表于 2023-5-2 20:29
这个图案设计非常漂亮，清舟厉害了

影好啊，抄的了

小辣椒 发表于 2023-5-3 15:13

孤帆远航，意境特别美{:4_199:}
页: [1] 2
查看完整版本: 孤帆