马黑黑 发表于 2023-4-12 07:46

css-doodle加餐教程（二）

本帖最后由 马黑黑 于 2023-4-12 07:49 编辑

让四叶草转起来并可以控制它

在第一个加餐教程，css-doodle加餐教程（一），我们编写了一个 css-doodle 图案，四叶草，仅用了短短几行代码。现在，我们让四叶草动起来并且可以让它暂停。上代码：

<css-doodle grid="1">
      :doodle {
                @size: 160px;
                cursor: pointer;
                --state: running;
      }
       :doodle(:hover) { --state: paused; }
      background: rgb(20,20,200);
      @shape: clover,4;
       animation: rot 6s infinite linear var(--state);
      @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>

这组代码，是在第一个教程代码基础上发展而来，彩色部分都是新添加的。我们一一做解释：

① cursor: pointer; 这句是标准 CSS 属性设置语句，将 css-doodle 容器 的鼠标指针设置为手型；

② --state: running; 这句是标准的 CSS 变量赋值，我们将四叶草的关键帧动画设置为运行；

③ :doodle(:hover) { --state: paused; } 这一句，是 :doodle 选择器的 :hover 伪类，鼠标指针滑过主元素时的状态，我们再次伪类选择器中设置 CSS 变量 --state 为暂停；

④ animation: rot 6s infinite linear var(--state); 这句是子元素（即单元格）运行关键帧动画 rot ，其运行与否依托变量 --state 来决定；

⑤ @keyframes rot { to { transform: rotate(1turn); } } 这一句是设计一个名称叫 rot 的关键帧动画，转一圈。

运行本组代码，四叶草会匀速旋转，当鼠标指针移上去时，暂停旋转，离开，继续旋转。

想查看运行效果，请将代码复制到如下页面的代码栏中然后点击“运行代码”按钮：

http://mahei.freeee.ml/api/pencilcode/pencilcode-ddl.html

雨中悄然 发表于 2023-4-12 08:46

转起来吧，四叶草。。。
原来驱动是这么装的

红影 发表于 2023-4-12 09:53

这个设置里添加的代码倒是和css里的语句没什么区别呢。

红影 发表于 2023-4-12 09:58

:doodle(:hover)，是 :doodle 选择器的 :hover 伪类。比其他的伪类多了个括号。

红影 发表于 2023-4-12 10:06

选择器 :doodle {} 代码块里到底能放哪些主元素呢？
看到能放宽高及圆角，还能放鼠标指针，但是背景色必须在花括号的外面。
哪些东西放里面哪些放外面感觉有点迷糊{:4_175:}

樵歌 发表于 2023-4-12 14:37

不知道能用在轱辘上么{:4_173:}

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

樵歌 发表于 2023-4-12 14:37
不知道能用在轱辘上么

理论上可以，叫小辣椒来完成
页: [1]
查看完整版本: css-doodle加餐教程（二）