乌龟赛跑

马黑黑

马黑黑

一楼所使用的图片：

                               
登录/注册后可看大图

这是一张尺寸为 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>

马黑黑

乌龟图片底色是白色，所以，在一楼，我加了一个父元素，背景色是白色：
#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>

马黑黑

关于 background-position 属性：

这是定义图片在元素背景中的位置的一个属性，它针对图片。举个栗子说明一下——

.mydiv {
        width: 200px;
        height: 200px;
        background: url('图片地址') no-repeat;
        background-position: 0px -400px;
}


这表示，图片在元素上的显示，从图片的左边 0px 、上边 400px 开始。这是裁剪图片的一部分做背景图，奥妙在于：除了最左边、最顶边是 0 ，往右、往下的都得用负值。

焱鑫磊

乌龟跑得还挺快！

马黑黑

焱鑫磊 发表于 2023-7-2 08:02
乌龟跑得还挺快！

嗯，刚吃过早餐，喝了咖啡

岩新新

欣赏点赞！

红影

wugui:nth-of-type()可以再继续加下去的吧，不过这么点距离上，加上它们的时间间隔和自身长度，弄3只足够了

红影

马黑黑 发表于 2023-7-2 07:50
一楼所使用的图片：

这个使用的是纵向图图，所以移动的都是Y坐标，如果是横向的图图，变化的就是X坐标吧。
又是两个动态驱动，互不干扰

红影

帖子里又有好多的东西需要学习，这个帖子太棒了

红影

都不用JS来帮忙就实现了，这个帖子学起来容易点了

马黑黑

红影 发表于 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
沙发讲得太清楚了，竖版蒙太奇加向右移动，两个动作同时进行，实现效果。。

理解正确

樵歌

简直太好玩了

马黑黑

樵歌 发表于 2023-7-2 13:09
简直太好玩了

这个木有钓上手过吧