|
|

楼主 |
发表于 2023-7-2 07:50
|
显示全部楼层
本帖最后由 马黑黑 于 2023-7-2 08:20 编辑
一楼所使用的图片:
这是一张尺寸为 178x1122 的乌龟图片,图中有六只乌龟,其实是同一只乌龟的六个动作。这些动作按顺序连缀起来就是乌龟的爬游动画。
下面是乌龟的元素CSS样式:
.wugui {
margin: 30px 0;
position: absolute;
left: 0px;
width: 178px;
height: 187px;
background: url('https://638183.freep.cn/638183/t23/2/tortoise.png') no-repeat;
animation: crawl 2s steps(6) var(--delay) infinite, move 16s var(--delay) infinite linear;
--delay: -8.5s;
}
① 元素尺寸的设置非常重要:宽度与图片的宽度一致,高度则为 1122/6=187(px);
② 背景图片极为乌龟图片,no-repeat 参数确保图片只加载了图片的第一份(1/6);
③ animation 属性调用两个关键帧动画,一个是 crawl ,爬行动作,另一个是 move ,移动动作。两个关键帧动画的调用参数不尽一致,crawl 使用分步(6步),move 用匀速曲率。至于 --delay,是延时用的CSS变量,默认是 -8.2s ,提前 8.2 秒运行动画。
下面是第二、三只乌龟的差异性设置:
.wugui:nth-of-type(2) {
transform: scale(.5);
--delay: -5.4s;
}
.wugui:nth-of-type(3) {
transform: scale(.8);
--delay: -0.1s;
}
使用 transform: scale(x) 来改变元素的尺寸,--delay 变量值各自不同。
下面是两个关键帧动画的设计:
@keyframes crawl {
0% { background-position:0px 0px; }
100% { background-position:0px -1122px; }
}
@keyframes move {
to { left: 720px; }
}
第一个关键帧动画是爬行动作,因为要分步运行,保险的做法是用 百分比 关键字而不是用 from ... to ... ,动画内容是设置元素的背景图片位置,从 {0px, 0px}开始,到 {0px, -1122px} 结束。其用途是令元素的背景图片逐一上移,所以主要针对Y坐标,X坐标一直是 0px 。
第二个关键帧动画是水平位置变换,从元素的 left 初始值 0px 到 720px 止。
最后,三个元素的HTML代码:
<div class="wugui"></div>
<div class="wugui"></div>
<div class="wugui"></div>
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
南无月
| + 30 |
+ 60 |
+ 30 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|