css-doodle加餐教程（二）

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 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