马黑黑 发表于 2023-4-29 07:39

大自然之音：祝友友们五一出行快乐

<css-doodle grid="1x3" id="mplayer">
    :doodle {
      @size: 1024px 640px;
      background: url('https://638183.freep.cn/638183/t23/1/4000_3.jpg') no-repeat center/cover;
      pointer-events: none;
      margin: -80px 0 0 calc(50% - 593px);
      box-shadow: 0 0 8px #000;
      --state: paused;
    }
    @size: 200px;
    @place: center 120px;
    cursor: pointer;
    pointer-events: auto;
    @at(1,1) {
      background: gray linear-gradient(red,green,red);
      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: 360px 420px;
      background: linear-gradient(silver,lightgreen);
      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=2017510419" 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-4-29 07:40

帖子代码

<css-doodle grid="1x3" id="mplayer">
    :doodle {
      @size: 1024px 640px;
      background: url('https://638183.freep.cn/638183/t23/1/4000_3.jpg') no-repeat center/cover;
      pointer-events: none;
      margin: -80px 0 0 calc(50% - 593px);
      box-shadow: 0 0 8px #000;
      --state: paused;
    }
    @size: 200px;
    @place: center 120px;
    cursor: pointer;
    pointer-events: auto;
    @at(1,1) {
      background: gray linear-gradient(red,green,red);
      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: 360px 420px;
      background: linear-gradient(silver,lightgreen);
      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=2017510419" 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-4-29 07:52

整体使用 css-doodle 布局实现：1列3行的网格结构，第一单元格构建旋转花朵、第二单元格构建摇摆帆船、第三单元格做第一单元格的帮手令其获得更友好的点击交互。帖子背景则由 :doodle{} 选择器承载。

第一单元格和第二单元格均使用 clip-path 裁剪路径属性（CSS方法），配合 css-doodle 的 @shape() 函数（注意其与 @shape 属性的区别），使用 css-doodle 属性，内含高级数学方法，创建一些复杂的图案。所用到的数学方法，有极坐标系、笛卡尔坐标系以及表达这些坐标系的方程式，很抽象，这里就不具体解释了。

马黑黑 发表于 2023-4-29 07:54

帖子所使用的图案，均源自袁川大佬的示例，特此说明

樵歌 发表于 2023-4-29 09:07

音乐飘缈空灵，我几乎双手合什念曰吽嘛咪叭咪吽。。。。。

马黑黑 发表于 2023-4-29 09:33

樵歌 发表于 2023-4-29 09:07
音乐飘缈空灵，我几乎双手合什念曰吽嘛咪叭咪吽。。。。。

不会吧？这是大自然之音，与佛教没有什么关系

樵歌 发表于 2023-4-29 09:45

马黑黑 发表于 2023-4-29 09:33
不会吧？这是大自然之音，与佛教没有什么关系

一切回归于自然，最后不是坐化就是天葬，而灵魂源于自然又回归自然。{:4_203:}

马黑黑 发表于 2023-4-29 10:28

樵歌 发表于 2023-4-29 09:45
一切回归于自然，最后不是坐化就是天葬，而灵魂源于自然又回归自然。

这不是佛教发现的

梦油 发表于 2023-4-29 10:29

利用五一假期畅游祖国明山大河。祝朋友们节日快乐！

樵歌 发表于 2023-4-29 10:47

马黑黑 发表于 2023-4-29 10:28
这不是佛教发现的

万物本同源呢{:4_173:}

马黑黑 发表于 2023-4-29 11:09

樵歌 发表于 2023-4-29 10:47
万物本同源呢

但一提到回归自然、生命归宿之类的，为什么大家首先想到的是佛教的理念呢

马黑黑 发表于 2023-4-29 11:10

梦油 发表于 2023-4-29 10:29
利用五一假期畅游祖国明山大河。祝朋友们节日快乐！

嗯嗯，感谢支持

醉美水芙蓉 发表于 2023-4-29 11:44

马黑黑 发表于 2023-4-29 11:52

醉美水芙蓉 发表于 2023-4-29 11:44
黑黑老师中午好！

中午好

梦油 发表于 2023-4-29 14:54

马黑黑 发表于 2023-4-29 11:10
嗯嗯，感谢支持

黑黑先生别客气。

红影 发表于 2023-4-29 17:57

很空灵美妙的音乐，这场景也漂亮。欣赏黑黑好帖，五一小长假空灵{:4_187:}

绿叶清舟 发表于 2023-4-30 12:01

节日快乐，看上去很复杂的

马黑黑 发表于 2023-4-30 17:12

绿叶清舟 发表于 2023-4-30 12:01
节日快乐，看上去很复杂的

深入其中后你会觉得很简单

马黑黑 发表于 2023-4-30 17:12

红影 发表于 2023-4-29 17:57
很空灵美妙的音乐，这场景也漂亮。欣赏黑黑好帖，五一小长假空灵

节日好

马黑黑 发表于 2023-4-30 17:12

梦油 发表于 2023-4-29 14:54
黑黑先生别客气。

节日好
页: [1] 2
查看完整版本: 大自然之音：祝友友们五一出行快乐