#lunbo{
width: 1226px;
height: 460px;
/*background: url(imgs/lunbo1.jpg);*/
animation: 16s lunbo ease-in infinite;
}
@keyframes lunbo{
0%{background: url(imgs/lunbo1.jpg);}
25%{background: url(imgs/lunbo2.jpg);}
50%{background: url(imgs/lunbo3.jpg);}
75%{background: url(imgs/lunbo4.jpg);}
100%{background: url(imgs/lunbo5.jpg);}
}
黄舟2017-04-17 11:50:12
首先要明白為什麼會閃,因為0% 和 100%在infinite的情況下是會馬上過渡過去的,第5張和第一張圖片之間並沒有過渡效果,所以要這樣改
@keyframes lunbo{
0%{background: url(imgs/lunbo1.jpg);}
20%{background: url(imgs/lunbo2.jpg);}
40%{background: url(imgs/lunbo3.jpg);}
60%{background: url(imgs/lunbo4.jpg);}
80%{background: url(imgs/lunbo5.jpg);}
100%{background: url(imgs/lunbo1.jpg);}
}