東莞易思訓教育

7x24小時咨詢熱線

400-660-3310

當前位置 : 好學校 東莞易思訓教育 學習資訊 資訊詳情

Web前端css3如何實現(xiàn)進度條動畫效果?

2021-09-13

項目過程中,開始使用了js的requestAnimationFrame方法實現(xiàn)進度條,但是在數據超級多的時候非常影響性能,如此改用css去實現(xiàn),優(yōu)化。

Web前端css3如何實現(xiàn)進度條動畫效果

*{margin: 0;padding: 0}

.box{width: 100px;height: 10px;border-radius: 10px;background: #999;margin: 100px auto;border: 1px solid #ff6780;}

.child{position: relative;height:100 %;border-radius:inherit;}

.process-animate{background: #ff6780;position: absolute;left: 0;top: 0;bottom: 0;border-radius:inherit;

animation: process 1s linear forwards ;

}

@keyframes process

{

0%{

left:0;right:100 %;

}

20%{

right:80%

}

40%{

right:60%;

}

60%{right:40%;}

80%{right:20%;}

100 %{right:0;}

}

收藏
分享到:

相關課程

相關資訊

東莞易思訓教育

東莞易思訓教育

認證等級

信譽良好,可安心報讀

東莞易思訓教育

已獲好學校V2信譽等級認證

信譽值

  • (60-80)基礎信譽積累,可放心報讀
  • (81-90)良好信譽積累,可持續(xù)信賴
  • (91-100)充分信譽積累,推薦報讀

與好學校簽訂讀書保障協(xié)議:

  • 100%
  • 37
  • 1903
在線咨詢
;