马黑黑 发表于 2023-4-27 19:05

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

一、代码

<css-doodle id="mplayer">
        :doodle {
                @grid: 4 / 1024px 640px;
                background: url('https://638183.freep.cn/638183/t23/1/fgjk.jpg') no-repeat center/cover;
                margin: -80px 0 0 calc(50% - 593px);
                box-shadow: 0 0 8px #000;
                pointer-events: none;
                --state: running;
        }
        @match(i <= 12) {
                @place-cell: 50% 15%;
                @size: calc(@i() * 12px);
                @shape: bud 10;
                border: 6px solid #@repeat(6, @p());
                pointer-events: auto;
                cursor: pointer;
                animation: rot 4s infinite linear var(--state);
        }
        @match(i > 12) {
                background: gray;
                @size: @p(40px, 80px);
                @shape: @p(whale,fish);
                @place-cell: 720px 440px;
                transform: rotate(calc((@size() - @i() + 1) * 30deg)) translate(80px);
        }
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>

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

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://unpkg.com/css-doodle@0.34.8/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-4-27 19:06

本帖最后由 马黑黑 于 2023-4-27 19:44 编辑

二、简单解释

帖子由 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()); ，设置边框，颜色随机；
    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行：播放控制器点击事件

起个网名好难 发表于 2023-4-27 20:12

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

醉美水芙蓉 发表于 2023-4-27 21:09

马黑黑 发表于 2023-4-27 21:13

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

这个我都有说明的

马黑黑 发表于 2023-4-27 21:14

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

{:4_191:}

起个网名好难 发表于 2023-4-27 21:25

本帖最后由 起个网名好难 于 2023-4-27 21:26 编辑

马黑黑 发表于 2023-4-27 21:13
这个我都有说明的
只看了代码没注意说明。

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

小辣椒 发表于 2023-4-28 18:53

黑黑辛苦又有新教程{:4_199:}

小辣椒 发表于 2023-4-28 18:55

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

帖子由 css-doodle 构建：


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

马黑黑 发表于 2023-4-28 19:25

小辣椒 发表于 2023-4-28 18:55
还有详细说明，谢谢黑黑无私的分享
希望你也可以花点时间学学，这个挺好

马黑黑 发表于 2023-4-28 19:25

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

{:4_190:}喝水

红影 发表于 2023-4-28 21:41

黑黑辛苦，感谢分享{:4_187:}

马黑黑 发表于 2023-4-29 07:36

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

早上好
页: [1]
查看完整版本: 《明日幻想曲》代码及说明