前言
大家还记得我们的轮播图嘛。在一行中放入几张图片,只给盒子一张图片的大小,让几个图片通过位置的移动慢慢滚动呈现出来。
其实动画的原理也是如此。这节博客就以奔跑的熊案例来讲解如何单纯利用css让图片动起来。
一、图片资源
二、原理
这张图片的宽度是1600px,一共是8帧。我们只需要给一个1600/8,也就是200px的盒子,并且让这张图片向左移动,就可以让大熊跑起来。
图片的速度曲线利用steps步长,一次向左挪动200px即可让大熊图片一帧一帧向左移动。
动画部分代码如下:
.bear {
position: absolute;
width: 200px;
height: 100px;
background: url('./运动的熊.png') no-repeat;
animation: bear 1s steps(8) infinite;
/* 元素可以添加多个动画,用逗号分隔 */
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
这样大熊就可以在div中一直运动了。
但是想要做出大熊运动的同时往前跑,我们就需要再给盒子加一层动画。
== 元素可以有两个动画,只需要在animation属性中用逗号隔开即可==
所以我们给盒子又加了个动画,让它往前挪动,并在animation属性中添加。
代码如下:
.bear {
position: absolute;
width: 200px;
height: 100px;
background: url('./运动的熊.png') no-repeat;
animation: bear 1s steps(8) infinite, move 5s forwards;
/* 元素可以添加多个动画,用逗号分隔 */
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translate(-50%);
}
}
加上两个动画后即可实现功能。
三、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: #ccc;
}
.bear {
position: absolute;
width: 200px;
height: 100px;
background: url('./运动的熊.png') no-repeat;
animation: bear 1s steps(8) infinite, move 5s forwards;
/* 元素可以添加多个动画,用逗号分隔 */
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translate(-50%);
}
}
</style>
</head>
<body>
<div class="bear"></div>
</body>
</html>