html动画转换为gif,css 将长图做成gif动画
html动画转换为gif,css 将长图做成gif动画
效果
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