5分钟教你利用css3动画实现奔跑的北极熊效果

本文链接：https://blog.csdn.net/weixin_44823731/article/details/105654763

实现原理:利用css3动画中的animation-timing-function的steps()，让一张有连续动作图片一段一段的在页面上显示出来，从而实现动画效果。

1.需要素材:

在这里插入图片描述

2.准备一个div盒子

div盒子的作用：用于显示素材中的一只北极熊。因为我们的素材是1600x100，有8只北极熊，所以我们div盒子的宽高就是200x100,这样我们就把我们的素材分成8份了

<div class="box"></div>

body {
	margin: 0;
	padding: 0;
	/* 由于我们的素材是透明的，方便观看，我们加上灰色背景 */
	background-color: #ccc; 
}
.box {
	width: 200px;
	height: 100px;
	background: url("./bear-25676f9.png") no-repeat;
}

这样我们的页面就有个小熊了:
在这里插入图片描述

3.加上动画效果

动画：通过让背景图片每段从左向右每200px移动一次

@keyframes bear {
	100% {
	/* 因为小熊是从左向右进行显示的，因为box是没有移动的，从而背景图片的是向左走的。所以是-1600px，而高度是不变的 所以是0*/
		background-position: -1600px 0;
	}
}

在.box中调用bear这个动画

.box {
	width: 200px;
	height: 100px;
	background: url("./bear-25676f9.png") no-repeat;
	/*steps(8):将动画效果变成一段一段的展示，变成8段*/
	/* infinite: 让小熊一直重复的跑 */
	animation: bear 1s steps(8) infinite forwards;
}

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #ccc;
        }

        .box {
            width: 200px;
            height: 100px;
            background: url("./bear-25676f9.png") no-repeat;
            animation: bear 1s steps(8) infinite ;
        }

        @keyframes bear {
            100% {
                background-position: -1600px 0;
            }
        }

       
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>