本文共 1564 字，大约阅读时间需要 5 分钟。

利用H5和C3制作奔跑的白熊

本次需要用到的素材图片：

steps 函数是 animation-timing-function 属性的一个值，steps函数接收两个参数： number 和position 。

number： number 表示动画被分成了多少段；position： position 参数可选，默认为 end 。

二、效果

三、思路

1. 先设置一个盒子，大小刚好能显示白熊奔跑的一张图片，放上白熊的图片
2. 白熊奔跑需要用到动画@keyframes实现，注意最后重复奔跑的动作，要用到animation-iteration-count：infinite
3. 白熊盒子从屏幕左侧移动到中间，也需要设置新的动画，最后停在屏幕中间，需要用到animation-fill-mode：forwards
4. 一个元素可以引用多个动画，之间用逗号隔开
5. ※※※※※※※※※※※※重头戏：为了能够实现这种在逐帧动画效果，需要引出3D动画新的属性——steps（）。在括号内输入数字，他会按照数字实现分步效果。

四、实践

1. 在body区设置个div盒子

2. 为盒子赋予绝对定位（因为本案例只涉及一个盒子，其父盒子是body，因此不用设置相对定位），使其位于屏幕中间，再设置白熊背景图片

CSS

div {            position: absolute;            top: 50%;            left: 0;            width: 200px;            height: 100px;            background: url(image/熊大.png);}

3. 设置白熊奔跑的动画，需要用到background-position参数：background-position 属性设置背景图像的起始位置，通过变换不同的位置达成白熊在奔跑的效果。

CSS

div{    animation: bear .8s steps(8) infinite}

*由于图片共有8张，因此设置steps(8)，最后设置infinite让动画循环*

@keyframes bear {            0% {                /* background-position是背景图片起始位置，通过变换背景图片的位置让熊看起来像奔跑 */                background-position: 1600px 0;            }            100% {                background-position: 0 0;            }        }

4. 奔跑做好了来做向前跑的效果，再设置一个新的动画，0%时不变，100%时左移动50%

CSS

div{    animation: bear .8s steps(8) infinite, move 2.5s forwards;    }

*元素可以调用多个动画，用逗号隔开；forward指动画结束后停留，不返回最先位置*

@keyframes move {            0% {                left: 0;            }            100% {                left: 50%;            }        }

1. 逐帧动画效果用到steps()，括号内输入数字
2. 元素可以调用多个动画，用逗号隔开
3. background-position是背景图片起始位置，通过变换背景图片的位置让熊看起来像奔跑

转载地址：https://blog.csdn.net/zx2014567296/article/details/116202810 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！