论坛 › 欢乐水吧 › 夜雨

马黑黑 发表于 2023-5-15 12:23

夜雨

本帖最后由 马黑黑 于 2023-5-15 12:44 编辑 <br /><br /><css-doodle grid="30" id="mplayer">
        :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); } }
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35032655" autoplay loop></audio>

<script>
(function() {
        let script = document.createElement('script');
        script.src = '/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-15 12:26

本帖最后由 马黑黑 于 2023-5-15 12:38 编辑

一、雨：选择器 @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 便可。

马黑黑 发表于 2023-5-15 12:41

本帖最后由 马黑黑 于 2023-5-15 12:44 编辑

帖子代码
<css-doodle grid="30" id="mplayer">
      :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); } }
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=35032655" autoplay loop></audio>

<script>
(function() {
      let script = document.createElement('script');
      script.src = '/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-15 12:43

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

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

欣赏，学习

马黑黑 发表于 2023-5-15 12:45

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

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

红影 发表于 2023-5-15 13:03

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

小文 发表于 2023-5-15 13:18

好漂亮，欣赏！

马黑黑 发表于 2023-5-15 13:23

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

感谢支持

马黑黑 发表于 2023-5-15 13:24

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

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

红影 发表于 2023-5-15 14:23

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

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

梦油 发表于 2023-5-15 15:12

着雨水制作得太逼真了。

樵歌 发表于 2023-5-15 15:51

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

亦是金 发表于 2023-5-15 16:23

问好马黑黑老师！欣赏学习了！{:4_190:}

醉美水芙蓉 发表于 2023-5-15 17:08

醉美水芙蓉 发表于 2023-5-15 17:09

马黑黑 发表于 2023-5-15 17:34

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

感谢支持

马黑黑 发表于 2023-5-15 17:35

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

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

马黑黑 发表于 2023-5-15 17:35

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

下午好

马黑黑 发表于 2023-5-15 17:35

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

下午好

马黑黑 发表于 2023-5-15 17:37

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

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

查看完整版本: 夜雨