马黑黑 发表于 2023-5-2 08:00

屋后

<css-doodle grid="1x2" id="mplayer">
    :doodle {
      @size: 1024px 576px;
      background: lightgreen url('https://638183.freep.cn/638183/t23/1/forest.jpg') no-repeat center/cover;
      position: relative;
      margin: -80px 0 0 calc(50% - 593px);
      box-shadow: 0 0 8px 0 #000;
      pointer-evetns: none;
      z-index: 2;
      --state: paused;
    }
    @size: 200px;
    @place: 50% 16%;
    background: radial-gradient(red,orange,lightgreen);
    clip-path: @shape(
      points: 580;
      r: cos(100t);
    );
    @at(1,2) { background: radial-gradient(darkred,green,snow); }
    cursor: pointer;
    pointer-events: auto;
    animation: rot @pn(6s, 8s) infinite linear var(--state);
    @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=557805233" 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 08:01

帖子代码
<css-doodle grid="1x2" id="mplayer">
    :doodle {
      @size: 1024px 576px;
      background: lightgreen url('https://638183.freep.cn/638183/t23/1/forest.jpg') no-repeat center/cover;
      position: relative;
      margin: -80px 0 0 calc(50% - 593px);
      box-shadow: 0 0 8px 0 #000;
      pointer-evetns: none;
      z-index: 2;
      --state: paused;
    }
    @size: 200px;
    @place: 50% 16%;
    background: radial-gradient(red,orange,lightgreen);
    clip-path: @shape(
      points: 580;
      r: cos(100t);
    );
    @at(1,2) { background: radial-gradient(darkred,green,snow); }
    cursor: pointer;
    pointer-events: auto;
    animation: rot @pn(6s, 8s) infinite linear var(--state);
    @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=557805233" 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 08:10

帖子实现方法：

用 css-doodle 实现，1列2行的网格，单元格尺寸 200*200px，径向渐变背景（二者有所区别），然后通过 CSS 的 clip-path 属性配套 css-doodle 的 @shape() 函数在每个单元格的上面裁剪路径，得出两个图案。两个图案重叠，关键帧动画周期时长一个6s一个8s，就酱简简单单。

屋后的美，其实无需修饰，播放器的设计配得上它就行。

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

瞧瞧屋后藏了谁

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

这个颜色变化更多了

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

绿叶清舟 发表于 2023-5-2 09:43
瞧瞧屋后藏了谁

小心有黑熊

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

绿叶清舟 发表于 2023-5-2 09:44
这个颜色变化更多了

每一个单元格，有三种颜色参与渐变，仅此而已

焱鑫磊 发表于 2023-5-2 10:36

欣赏老师佳作！{:4_187:}

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

鸟鸣为整个画面增添了活力。

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

梦油 发表于 2023-5-2 11:04
鸟鸣为整个画面增添了活力。

鸟儿是大自然中不可或缺的元素

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

焱鑫磊 发表于 2023-5-2 10:36
欣赏老师佳作！

上午好

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

马黑黑 发表于 2023-5-2 11:51

醉美水芙蓉 发表于 2023-5-2 11:46
闪闪发光好美！

中午好

梦油 发表于 2023-5-2 13:02

马黑黑 发表于 2023-5-2 11:10
鸟儿是大自然中不可或缺的元素

设计合理、制作精良。

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

花瓣太阳，谢谢老师的分享，欣赏问好！{:4_185:}

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

马黑黑 发表于 2023-5-2 10:02
小心有黑熊

咋这么重口味的

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

马黑黑 发表于 2023-5-2 10:03
每一个单元格，有三种颜色参与渐变，仅此而已

这个图形咋控制呢

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

这个能弄出这么漂亮的图案来，太赞了{:4_199:}

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

红影 发表于 2023-5-2 20:18
这个能弄出这么漂亮的图案来，太赞了

晚上嚎，节日嚎

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

梦油 发表于 2023-5-2 13:02
设计合理、制作精良。

感谢支持
页: [1] 2
查看完整版本: 屋后