屋后

马黑黑

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

马黑黑

帖子代码

1. <css-doodle grid="1x2" id="mplayer">
   
2.     :doodle {
   
3.         @size: 1024px 576px;
   
4.         background: lightgreen url('https://638183.freep.cn/638183/t23/1/forest.jpg') no-repeat center/cover;
   
5.         position: relative;
   
6.         margin: -80px 0 0 calc(50% - 593px);
   
7.         box-shadow: 0 0 8px 0 #000;
   
8.         pointer-evetns: none;
   
9.         z-index: 2;
   
10.         --state: paused;
    
11.     }
    
12.     @size: 200px;
    
13.     @place: 50% 16%;
    
14.     background: radial-gradient(red,orange,lightgreen);
    
15.     clip-path: @shape(
    
16.         points: 580;
    
17.         r: cos(100t);
    
18.     );
    
19.     @at(1,2) { background: radial-gradient(darkred,green,snow); }
    
20.     cursor: pointer;
    
21.     pointer-events: auto;
    
22.     animation: rot @pn(6s, 8s) infinite linear var(--state);
    
23.     @keyframes rot { to { transform: rotate(360deg); } }
    
24. </css-doodle>
    
25. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=557805233" autoplay loop></audio>
    
26. 
    
27. <script>
    
28. (function() {
    
29.         let script = document.createElement('script');
    
30.         script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
    
31.         document.head.appendChild(script);
    
32.         let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
33.         aud.addEventListener('play', mState, false);
    
34.         aud.addEventListener('pause', mState, false);
    
35.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
36. })();
    
37. </script>

复制代码

马黑黑

帖子实现方法：

用 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 11:04
鸟鸣为整个画面增添了活力。

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

马黑黑

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

上午好

马黑黑

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

中午好

梦油

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

设计合理、制作精良。

梦缘

花瓣太阳，谢谢老师的分享，欣赏问好！

绿叶清舟

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

咋这么重口味的

绿叶清舟

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

这个图形咋控制呢

红影

这个能弄出这么漂亮的图案来，太赞了

马黑黑

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

晚上嚎，节日嚎

马黑黑

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

感谢支持