CSS animation动画效果实现精灵图、雪碧图动画，多动画应用
-
分析图片动画过程
-
图片可以分成4*6=24 小图片也就是24帧
- 方法1 可以把每一行成一个动画，所以可以拆分4个动画
- 方法2 独立写成一个动画
- 动画一共24帧 100/24≈4
- 每4%作为一帧
方法1
页面主要框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>特朗普动画</title>
</head>
<body>
<div>
</div>
<h2>
hover执行
</h2>
<div class="box"></div>
</body>
</html
图解图片每个帧的background-position属性，图片的分辨率为600*400
background-position: 0 0;第一个值是水平位置，第二个值是垂直位置。
下面的值是相对div,图片需要移动的值（px）图片向左移动为负值，向右相反，图片向上移动为负值，向下相反
CSS样式
<style>
div {
width: 100px;
height: 100px;
border: 1px red solid;
background-image: url("./images/trump_run.png");
/* 设置背景不重复方便调节 */
background-repeat: no-repeat;
/* 多动画使用,隔开
run2 2s 2s steps(5)
run2规定需要绑定到选择器的 keyframe 名称,
2s规定完成动画所花费的时间,
2s规定在动画开始之前的延迟,
steps(5)规定动画的步数。 */
animation: run 2s steps(5), run2 2s 2s steps(5), run3 2s 4s steps(5), run4 2s 6s steps(5);
animation-iteration-count: infinite, infinite, infinite, infinite;
}
//第一行动画
@keyframes run {
0% {
background-position: 0 0;
}
100% {
background-position: -500px 0;
}
}
//第二行动画
@keyframes run2 {
from {
background-position: 0px -100px;
}
to {
background-position: -500px -100px;
}
}
//第三行动画
@keyframes run3 {
from {
background-position: -0px -200px;
}
to {
background-position: -500px -200px;
}
}
//第四行动画
@keyframes run4 {
from {
background-position: -0px -300px;
}
to {
background-position: -500px -300px;
}
}
.box {
animation-play-state: paused;
}
.box:hover {
//鼠标经过执行动画
animation-play-state: running;
}
</style>
效果
方法2
将图片拆分24帧,并写上对应background-position,写完应用动画就行了
@keyframes identifier {
1*4%{background-position: }
2*4% .
3*4% .
4*4% .
5*4% .
6*4% .
7*4%
8*4% .
9*4%
10*4%
11*4% .
12*4%
13*4%
14*4% .
15*4%
16*4%
17*4%
18*4% .
19*4%
20*4%
21*4% .
22*4%
23*4% .
24*4%{background-position: }
}
转载：https://blog.csdn.net/weixin_45472872/article/details/106041561
查看评论