html - css3轮换图片到第一张图片时都要闪一下怎么改进？

问题描述

问 题

#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);}
}

解决方案

首先要明白为什么会闪，因为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);}
}

这篇关于html - css3轮换图片到第一张图片时都要闪一下怎么改进？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！