搜尋

首頁  >  問答  >  主體

前端 - 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);}
}
天蓬老师天蓬老师2863 天前946

全部回覆(5)我來回復

  • 黄舟

    黄舟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);}
    }

    回覆
    0
  • 高洛峰

    高洛峰2017-04-17 11:50:12

    靠,竟然還有這種方法,以後不可以點擊的輪播圖就用這種方法

    回覆
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 11:50:12

    css寫輪播還真是方便,jq簡單的也要控制一個marginLeft屬性,這個css方法老衲收了,謝謝樓主

    回覆
    0
  • ringa_lee

    ringa_lee2017-04-17 11:50:12

    這種多張圖片切換的方式可以合成一個雪碧圖,然後使用css3逐幀動畫來完成
    CSS3動畫之逐幀動畫

    回覆
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:50:12

    我去實驗一下

    回覆
    0
  • 取消回覆