做成gif的动画效果,用多张图片组合成。
这里主要是用到animation中的steps
像我的项目需要37张图片组合成一个效果,一直播放动画。这边就不把37张图片截图了。
.gif{
-webkit-animation: run-gif 2s steps(1,end) infinite;
}
@-webkit-keyframes run-gif{
0%{
background-image: url(../../static/gif/ic_box_light_000.png);
}
...//中间还有很多个,37张就要37个
100%{
background-image: url(../../static/gif/ic_box_light_036.png);
}
}
正常写法是像上面这样的,但是需要重复写太多的css了
配合js来写
function setGif(){
let ht = ''
for(let i=0;i<36;i++){
let a = i < 10 ? `0${i}` : i
//2.85 计算37张 1张需要的动画百分比
ht += `
${2.85 * i}% {
background-image: url(../../static/gif/ic_box_light_0${a}.png);
}
`
}
let keyframes = `
@-webkit-keyframes run-gif{
${ht}
}
`
//给body添加动画css
var sheet = document.styleSheets[0]
sheet.insertRule(keyframes, 0)
}
over!