调用动画
定义好了就可以去了,来看一下怎么:
/* 清除浏览器认边距 */
* { padding: ; margin: ; }
body {
/* 这段是为了居中,不是重点,看不懂的话可以无视 */
height: vh;
display: flex;
align-items: center;
justify-content: center;
/* 背景图 */
background: url(../img/bg.jpg) center / cover;
}
.animate {
width: px;
height: px;
background: url(../img/rect.png);
/* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画(无限) */
animation: loading s step-end infinite;
}
/* 定义动画:动画名(loading) */
@keyframes loading {
from { background-position: } /* 第数字代表x轴坐标,第二个数字代表y轴坐标 */
10% { background-position: -px } /* x坐标:-130 y坐标:0 */
20% { background-position: -px } /* x坐标:-260 y坐标:0 */
30% { background-position: -px } /* x坐标:-390 y坐标:0 */
40% { background-position: -px } /* x坐标:-520 y坐标:0 */
50% { background-position: -px } /* x坐标:0 y坐标:-130 */
60% { background-position: -px -px } /* x坐标:-130 y坐标:-130 */
70% { background-position: -px -px } /* x坐标:-260 y坐标:-130 */
80% { background-position: -px -px } /* x坐标:-390 y坐标:-130 */
90% { background-position: -px -px } /* x坐标:-520 y坐标:-130 */
to { background-position: } /* 最后一帧,可以随便写 */
}
为了能够让同学们在浏览器里直接看结果,我们这里写了可运行的案例:
<!DOCTYPE html>
<html>
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画实战</title>
<style>
/* 清除浏览器认边距 */
* { padding: ; margin: ; }
body {
/* 这段是为了居中,不是重点,看不懂的话可以无视 */
height: vh;
display: flex;
align-items: center;
justify-content: center;
/* 背景图 */
background: url(http://img.mukewang.com/wiki/5eda029f08f198f513660768.jpg) center / cover;
}
.animate {
width: px;
height: px;
background: url(http://img.mukewang.com/wiki/5eda0279091a506500260.jpg);
/* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画(无限) */
animation: loading s step-end infinite;
}
/* 定义动画:动画名(loading) */
@keyframes loading {
from { background-position: } /* 第数字代表x轴坐标,第二个数字代表y轴坐标 */
10% { background-position: -px } /* x坐标:-130 y坐标:0 */
20% { background-position: -px } /* x坐标:-260 y坐标:0 */
30% { background-position: -px } /* x坐标:-390 y坐标:0 */
40% { background-position: -px } /* x坐标:-520 y坐标:0 */
50% { background-position: -px } /* x坐标:0 y坐标:-130 */
60% { background-position: -px -px } /* x坐标:-130 y坐标:-130 */
70% { background-position: -px -px } /* x坐标:-260 y坐标:-130 */
80% { background-position: -px -px } /* x坐标:-390 y坐标:-130 */
90% { background-position: -px -px } /* x坐标:-520 y坐标:-130 */
to { background-position: } /* 最后一帧,可以随便写 */
}
</style>
</head>
<body>
<div class="animate"></div>
</body>
</html>
运行结果:
可以看到就已经很完美的呈现出来了,那么接下来我们再来一下条形Css Sprite,看看条形Css Sprite的有何不同。
怎么样是不是很帅气呢?这就是Css Sprite帧动画的优势所在。
如果纯用CSS来实现这段特效那简直让人无从下手,但用Css Sprite+帧动画就可以很轻松的实现。
下一小节我们将在此基础上再动画,快来看看多个动画是如何并存的吧!