效果

gif

加个背景看清图片内容

image.png

代码

body{

background: #743efc;

}

.loading {

background: url('../imgs/8.png') no-repeat;

background-position: 0 0;

background-size: 100% auto;

width: 40px;

height: 40px;

animation: loading_gif 1s steps(1, start) infinite;

}

@keyframes loading_gif {

4.347826087% {

background-position: 0 -40px;

}

8.6956521739% {

background-position: 0 -80px;

}

13.0434782609% {

background-position: 0 -120px;

}

17.3913043478% {

background-position: 0 -160px;

}

21.7391304348% {

background-position: 0 -200px;

}

26.0869565217% {

background-position: 0 -240px;

}

30.4347826087% {

background-position: 0 -280px;

}

34.7826086957% {

background-position: 0 -320px;

}

39.1304347826% {

background-position: 0 -360px;

}

43.4782608696% {

background-position: 0 -400px;

}

47.8260869565% {

background-position: 0 -440px;

}

52.1739130435% {

background-position: 0 -480px;

}

56.5217391304% {

background-position: 0 -520px;

}

60.8695652174% {

background-position: 0 -560px;

}

65.2173913043% {

background-position: 0 -600px;

}

69.5652173913% {

background-position: 0 -640px;

}

73.9130434783% {

background-position: 0 -680px;

}

78.2608695652% {

background-position: 0 -720px;

}

82.6086956522% {

background-position: 0 -760px;

}

86.9565217391% {

background-position: 0 -800px;

}

91.3043478261% {

background-position: 0 -840px;

}

95.652173913% {

background-position: 0 -880px;

}

100% {

background-position: 0 -920px;

}

}

关于keyframes 计算方式

使用sass的循环和计算来写的。

此项目我是直接用的css，所以找了个sass转css代码转换网站来转换，就不用自己计算了。

转换完就变成上面那个样子了。

sass写法

/*

*23：我的图片有23个小图

*-40px：我的width设置为40px，所以每个图间隔40px

*/

@keyframes loading_gif {

@for $i from 1 through 23 {

#{(100/23)*$i}%{background-position: 0 -40px*$i;}

}

}

关于animation中steps

animation: loading_gif 1s steps(1, start) infinite;

steps第一个参数：数字

表示使用几步来执行完动画一个变化

例如：

1:一次直接过渡完

2：一次分成两步过渡的

steps第二个参数：start,end

end：保留当前帧状态，直到这段动画时间结束

(保留当前帧，我们可以看到第一帧在，最后一帧不在)

start：保留下一帧状态，直到这段动画时间结束

保留下一帧，我们可以看到第一帧不在，最后一帧在)

透明图层png(保存即可使用)

白色背景刚好看不到，啊哈哈...

图片有点长↓

8.png