夜雨

马黑黑

:doodle { @size: 1024px 683px; background: #000 url('https://638183.freep.cn/638183/t23/1/night1.jpg'); box-shadow: 0 0 8px #000; position: relative; z-index: 1; margin: 0 0 0 calc(50% - 593px); } @match(i ≤ @size - 2) { @size: @r(1,2)px @r(10,60)px; @place: @r(0,1024)px -100px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.3)); animation: fall @r(.5,1.5)s @r(-4,0)s infinite linear var(--state); } @nth(@size - 1, @size) { @size: 100px; @place: 340px 300px; clip-path: @shape( fill: evenodd; points: 50; scale: .45; x: cos(2t) + cos(π - 7t); y: sin(2t) + sin(7t); ); background: tan; cursor: pointer; animation: rot 4s infinite linear var(--state); } @nth(@size) { @place: 788px 160px; } @keyframes fall { to { transform: translateY(783px); } } @keyframes rot { to { transform: rotate(360deg); } }

马黑黑

一、雨：选择器 @match(i ≤ @size - 2) {}

使用 match() {。。。} 选择器匹配单元格序号小于等于 @size - 2 的所有单元格。@size 函数表示 css-doodle 全部的单元格总数，我们留下两个做播放按钮。

雨丝的模拟，使用线性渐变完成。

二、播放按钮  ：选择器 @nth(@size - 1, @size) {}

使用 @nth(。。。) {。。。} 选择器指定最后两个单元格做按钮。{} 内的代码设置了相关属性。因为两个按钮放置在不同的位置，所以在后面又设置一组 @nth(@size){。。。} 代码。

这是假的播放按钮，实际上整个帖子页面都接受播放/暂停点击操作。如果需要准确设定，即只有点击按钮才能控制音乐的播放与暂停，我们需要设置 pointer-events 属性 —— 给 :doole {} 选择器设为 none，给 @nth(@size - 1, @size) {} 选择器设为 auto 便可。

马黑黑

帖子代码

1. <css-doodle grid="30" id="mplayer">
   
2.         :doodle {
   
3.                 @size: 1024px 683px;
   
4.                 background: #000 url('https://638183.freep.cn/638183/t23/1/night1.jpg');
   
5.                 box-shadow: 0 0 8px #000;
   
6.                 position: relative;
   
7.                 z-index: 1;
   
8.                 margin: 0 0 0 calc(50% - 593px);
   
9.         }
   
10.         @match(i ≤ @size - 2) {
    
11.                 @size: @r(1,2)px @r(10,60)px;
    
12.                 @place: @r(0,1024)px -100px;
    
13.                 background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.3));
    
14.                 animation: fall @r(.5,1.5)s @r(-4,0)s infinite linear var(--state);
    
15.         }
    
16.         @nth(@size - 1, @size) {
    
17.                 @size: 100px;
    
18.                 @place: 340px 300px;
    
19.                 clip-path: @shape(
    
20.                         fill: evenodd;
    
21.                         points: 50;
    
22.                         scale: .45;
    
23.                         x: cos(2t) + cos(π - 7t);
    
24.                         y: sin(2t) + sin(7t);
    
25.                 );
    
26.                 background: tan;
    
27.                 cursor: pointer;
    
28.                 animation: rot 4s infinite linear var(--state);
    
29.         }
    
30.         @nth(@size) { @place: 788px 160px; }
    
31.         @keyframes fall { to { transform: translateY(783px); } }
    
32.         @keyframes rot { to { transform: rotate(360deg); } }
    
33. </css-doodle>
    
34. 
    
35. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=35032655" autoplay loop></audio>
    
36. 
    
37. <script>
    
38. (function() {
    
39.         let script = document.createElement('script');
    
40.         script.src = '/css-doodle.min.js';
    
41.         document.head.appendChild(script);
    
42.         let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
43.         aud.addEventListener('play', mState, false);
    
44.         aud.addEventListener('pause', mState, false);
    
45.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
46. })();
    
47. </script>

复制代码

起个网名好难

马黑黑 发表于 2023-5-15 12:26
一、雨：选择器 @match(i ≤ @size - 2) {}

使用 match() {。。。} 选择器匹配单元格序号小于等于 @size ...

欣赏，学习

马黑黑

起个网名好难 发表于 2023-5-15 12:43
欣赏，学习

一些数值刚调整好。这是线上做帖，有些地方把握的不好。

红影

这个帖子里的雨丝还有两个按钮都是代码制作的，漂亮
黑黑又带来新的制作方式

小文

好漂亮，欣赏！

马黑黑

小文 发表于 2023-5-15 13:18
好漂亮，欣赏！

感谢支持

马黑黑

红影 发表于 2023-5-15 13:03
这个帖子里的雨丝还有两个按钮都是代码制作的，漂亮
黑黑又带来新的制作方式

这个不算怎么新的吧？再说，创意也容易想得出来

红影

马黑黑 发表于 2023-5-15 13:24
这个不算怎么新的吧？再说，创意也容易想得出来

挺新的啊，还能从所有单元格里挖出两个另外派用途

梦油

着雨水制作得太逼真了。

樵歌

这算中到大雨吧，听见还有隐隐的雷声。
太厉害了

亦是金

问好马黑黑老师！欣赏学习了！

马黑黑

醉美水芙蓉 发表于 2023-5-15 17:09
背景和灯光漂亮！

感谢支持

马黑黑

红影 发表于 2023-5-15 14:23
挺新的啊，还能从所有单元格里挖出两个另外派用途

最近一直都这么干吧：用不同的单元格干不同的事情

马黑黑

醉美水芙蓉 发表于 2023-5-15 17:08
问候老师好！欣赏老师佳作！

下午好

马黑黑

亦是金 发表于 2023-5-15 16:23
问好马黑黑老师！欣赏学习了！

下午好

马黑黑

梦油 发表于 2023-5-15 15:12
着雨水制作得太逼真了。

道理上，雨丝其实是白色线条，加入了渐变与透明营造的效果，极其简单的修饰