|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
樵歌
| + 50 |
+ 100 |
+ 50 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
雨中悄然
| + 30 |
+ 60 |
+ 30 |
赞一个! |
查看全部评分
|