《明日幻想曲》代码及说明

马黑黑

一、代码

1. <css-doodle id="mplayer">
   
2.         :doodle {
   
3.                 @grid: 4 / 1024px 640px;
   
4.                 background: url('https://638183.freep.cn/638183/t23/1/fgjk.jpg') no-repeat center/cover;
   
5.                 margin: -80px 0 0 calc(50% - 593px);
   
6.                 box-shadow: 0 0 8px #000;
   
7.                 pointer-events: none;
   
8.                 --state: running;
   
9.         }
   
10.         @match(i <= 12) {
    
11.                 @place-cell: 50% 15%;
    
12.                 @size: calc(@i() * 12px);
    
13.                 @shape: bud 10;
    
14.                 border: 6px solid #@repeat(6, @p([0-9a-f]));
    
15.                 pointer-events: auto;
    
16.                 cursor: pointer;
    
17.                 animation: rot 4s infinite linear var(--state);
    
18.         }
    
19.         @match(i > 12) {
    
20.                 background: gray;
    
21.                 @size: @p(40px, 80px);
    
22.                 @shape: @p(whale,fish);
    
23.                 @place-cell: 720px 440px;
    
24.                 transform: rotate(calc((@size() - @i() + 1) * 30deg)) translate(80px);
    
25.         }
    
26.         @keyframes rot { to { transform: rotate(360deg); } }
    
27. </css-doodle>
    
28. 
    
29. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1937724657" autoplay loop></audio>
    
30. 
    
31. <script>
    
32. (function() {
    
33.         let script = document.createElement('script');
    
34.         script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js';
    
35.         document.head.appendChild(script);
    
36.         let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
37.         aud.addEventListener('play', mState, false);
    
38.         aud.addEventListener('pause', mState, false);
    
39.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
40. })();
    
41. </script>

复制代码

马黑黑

二、简单解释

帖子由 css-doodle 构建：

02-09行：:doodle {} 选择器，其中：

    ① 03行：4*4单元格，帖子尺寸 1024*640（px）；
    ② 04行：帖子背景；
    ③ 05行：帖子定位；
    ④ 06行：帖子父窗口阴影；
    ⑤ 帖子主窗体不接受单击事件；
    ⑥ 播放控制器旋转变量 --state 赋值：running 表示旋转，其实应考虑浏览器阻止自动播放的情况，设为 paused 较好。

10-18行：播放控制器集群

    选择器 @match(i <= 12) {} 中，match 表示匹配，匹配什么呢？小括号里的表达式，i <= 12，i 是 @i() 之意，即 @index() 函数，在 match() {} 选择器里，@ 可以不要（为的是与JS的相关表达相接近）、函数没有参数是可以不要小括号，故此，i <= 12 表示的是序号小于等于 12 的单元格（css-doodle单元格序号从 1 起算）。



    11行：@place-cell: 50% 15%; ，设定单元格的统一位置；
    12行：@size: calc(@i() * 12px); ，设定单元格的尺寸，大小与单元格序号（@i）相关，序号乘以基础大12px；
    13行：单元格形状统一设定为 @shape: bud 10;
    14行：border: 6px solid #@repeat(6, @p([0-9a-f])); ，设置边框，颜色随机；
    15行：pointer-events: auto; 设置元素集群可接收鼠标点击操作；
    16行：cursor: pointer; ，设置鼠标指针为手型；
    17行：调用关键帧动画 animation: rot 4s infinite linear var(--state);

19-25行：鱼和鲸鱼图案元素集群

    选择器 @match(i > 12) {} ，匹配序号大于 12 的单元格样式：


    20行：背景色；
    21行：鱼或鲸鱼的尺寸，要么是 40px，要么是 80px；
    22行：形状，要么是鲸鱼，要么是鱼（注意鲸鱼不是鱼额）；
    23行：鲸鱼或鱼的位置，720px 440px 是 xy坐标值；
    24行：transform: rotate(calc((@size() - @i() + 1) * 30deg)) translate(80px); ，旋转（rotate）一定角度，30deg 是基准，@size() - @i() + 1 是单元格总数（@size()）减去 单元格序号（@i()）加 1 的算式，是因为鲸鱼或鱼的单元格序号从 13 开始；然后位移（translate）一定距离，以产生鱼头朝向水边的效果；


26行：关键帧动画

29行：audio播放器标签

31-41行：JS代码，其中：

    33-35行：在论坛中引用 css-doodle 组件；
    36-38行：音频监听相关；
    39行：播放控制器点击事件

起个网名好难

@i , @size 不需要（）也行

马黑黑

起个网名好难 发表于 2023-4-27 20:12
@i , @size 不需要（）也行

这个我都有说明的

马黑黑

醉美水芙蓉 发表于 2023-4-27 21:09
黑黑老师辛苦了！

起个网名好难

马黑黑 发表于 2023-4-27 21:13
这个我都有说明的

只看了代码没注意说明。

@index 和 @size 没有带参数的吧

小辣椒

黑黑辛苦又有新教程

小辣椒

马黑黑 发表于 2023-4-27 19:06
二、简单解释

帖子由 css-doodle 构建：

还有详细说明，谢谢黑黑无私的分享

马黑黑

小辣椒 发表于 2023-4-28 18:55
还有详细说明，谢谢黑黑无私的分享

希望你也可以花点时间学学，这个挺好

马黑黑

小辣椒 发表于 2023-4-28 18:53
黑黑辛苦又有新教程

喝水

红影

黑黑辛苦，感谢分享

马黑黑

红影 发表于 2023-4-28 21:41
黑黑辛苦，感谢分享

早上好