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

马黑黑

: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); } }

马黑黑

帖子代码

1. <css-doodle grid="1x3" id="mplayer">
   
2.     :doodle {
   
3.         @size: 1024px 640px;
   
4.         background: url('https://638183.freep.cn/638183/t23/1/4000_3.jpg') no-repeat center/cover;
   
5.         pointer-events: none;
   
6.         margin: -80px 0 0 calc(50% - 593px);
   
7.         box-shadow: 0 0 8px #000;
   
8.         --state: paused;
   
9.     }
   
10.     @size: 200px;
    
11.     @place: center 120px;
    
12.     cursor: pointer;
    
13.     pointer-events: auto;
    
14.     @at(1,1) {
    
15.         background: gray linear-gradient(red,green,red);
    
16.         clip-path: @shape(
    
17.             points: 300;
    
18.             frame: 60;
    
19.             scale: .65;
    
20.             r: abs.cos(9t) ^ cos(9t);
    
21.         );
    
22.         animation: rot 6s infinite linear var(--state);
    
23.     }
    
24.     @at(1,2) {
    
25.         @size: 100px;
    
26.         @place: 360px 420px;
    
27.         background: linear-gradient(silver,lightgreen);
    
28.         clip-path: @shape(
    
29.             points: 720;
    
30.             scale: .4 .3;
    
31.             -y: cos(5t) + cos(3t) + cos(5t);
    
32.             x: sin(3t) + sin(3/t) + sin(2t);
    
33.         );
    
34.         transform-origin: bottom bottom;
    
35.         animation: swing .5s infinite alternate linear var(--state);
    
36.     }
    
37.     @keyframes rot { to { transform: rotate(1turn); } }
    
38.     @keyframes swing { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
    
39. </css-doodle>
    
40. 
    
41. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2017510419" autoplay loop></audio>
    
42. 
    
43. <script>
    
44. (function() {
    
45.     let script = document.createElement('script');
    
46.     script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
    
47.     document.head.appendChild(script);
    
48.     let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
49.     aud.addEventListener('play', mState, false);
    
50.     aud.addEventListener('pause', mState, false);
    
51.     mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
52. })();
    
53. </script>

复制代码

马黑黑

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

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

马黑黑

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

樵歌

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

马黑黑

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

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

樵歌

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

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

马黑黑

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

这不是佛教发现的

梦油

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

樵歌

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

万物本同源呢

马黑黑

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

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

马黑黑

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

嗯嗯，感谢支持

马黑黑

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

中午好

梦油

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

黑黑先生别客气。

红影

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

绿叶清舟

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

马黑黑

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

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

马黑黑

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

节日好

马黑黑

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

节日好