乌龟赛跑
<style>#wutai {
width: 100%;
height: 247px;
background: #fff;
border: 1px solid antiquewhite;
overflow: hidden;
position: relative;
}
.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;
}
.wugui:nth-of-type(2) {
transform: scale(.5);
--delay: -5.4s;
}
.wugui:nth-of-type(3) {
transform: scale(.8);
--delay: -0.1s;
}
@keyframes crawl {
0% { background-position:0px 0px; }
100% { background-position:0px -1122px; }
}
@keyframes move {
to { left: 720px; }
}
</style>
<div id="wutai">
<div class="wugui"></div>
<div class="wugui"></div>
<div class="wugui"></div>
</div>
本帖最后由 马黑黑 于 2023-7-2 08:20 编辑
一楼所使用的图片：
https://638183.freep.cn/638183/t23/2/tortoise.png
这是一张尺寸为 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>
本帖最后由 马黑黑 于 2023-7-2 08:36 编辑
乌龟图片底色是白色，所以，在一楼，我加了一个父元素，背景色是白色：
#wutai {
width: 100%;
height: 247px;
background: #fff;
border: 1px solid antiquewhite;
position: relative;
}
为什么高度设置为 247px 呢？考虑一下 .wugui 选择器的 margin 设置： margin: 30px 0; ，还有它的高度： height: 187px; ，187+30*2=247
相应的HTML代码则是酱紫：
<div id="wutai">
<div class="wugui"></div>
<div class="wugui"></div>
<div class="wugui"></div>
</div>
本帖最后由 马黑黑 于 2023-7-2 08:48 编辑
关于 background-position 属性：
这是定义图片在元素背景中的位置的一个属性，它针对图片。举个栗子说明一下——
.mydiv {
width: 200px;
height: 200px;
background: url('图片地址') no-repeat;
background-position: 0px -400px;
}
这表示，图片在元素上的显示，从图片的左边 0px 、上边 400px 开始。这是裁剪图片的一部分做背景图，奥妙在于：除了最左边、最顶边是 0 ，往右、往下的都得用负值。
乌龟跑得还挺快！{:4_187:} 焱鑫磊 发表于 2023-7-2 08:02
乌龟跑得还挺快！
嗯，刚吃过早餐，喝了咖啡 欣赏点赞！ wugui:nth-of-type()可以再继续加下去的吧，不过这么点距离上，加上它们的时间间隔和自身长度，弄3只足够了{:4_173:} 马黑黑 发表于 2023-7-2 07:50
一楼所使用的图片：
这个使用的是纵向图图，所以移动的都是Y坐标，如果是横向的图图，变化的就是X坐标吧。
又是两个动态驱动，互不干扰{:4_187:} 帖子里又有好多的东西需要学习，这个帖子太棒了{:4_199:} 都不用JS来帮忙就实现了，这个帖子学起来容易点了{:4_173:} 红影 发表于 2023-7-2 10:18
都不用JS来帮忙就实现了，这个帖子学起来容易点了
需要交互的，分析的，等等，那就得JS 岩新新 发表于 2023-7-2 10:08
欣赏点赞！
谢谢 红影 发表于 2023-7-2 10:13
wugui:nth-of-type()可以再继续加下去的吧，不过这么点距离上，加上它们的时间间隔和自身长度，弄3只足够了 ...
多的话，可以考虑元素的 top 值不同 红影 发表于 2023-7-2 10:15
这个使用的是纵向图图，所以移动的都是Y坐标，如果是横向的图图，变化的就是X坐标吧。
又是两个动态驱动 ...
是的 马黑黑 发表于 2023-7-2 07:50
一楼所使用的图片：
沙发讲得太清楚了，竖版蒙太奇加向右移动，两个动作同时进行，实现效果。。 南无月 发表于 2023-7-2 12:17
沙发讲得太清楚了，竖版蒙太奇加向右移动，两个动作同时进行，实现效果。。
理解正确 简直太好玩了{:4_203:} 本帖最后由 马黑黑 于 2023-7-2 13:48 编辑
樵歌 发表于 2023-7-2 13:09
简直太好玩了
这个木有钓上手过吧