10.进度条件加载特效

效果 (源码网盘地址在最后)

关注公众号《大迁世界》，查看更多视频教程！

源码

index.html

css

html {
  height: 100%;
  background: linear-gradient(#813b97, #463c96);
}

@-webkit-keyframes progress1 {
  0% {
    transform: scalex(0);
    opacity: 0.5;
  }
  90% {
    transform: scalex(1);
    opacity: 1;
  }
  92% {
    transform: scalex(1);
    opacity: 1;
  }
  100% {
    transform: scalex(1);
    opacity: 0;
  }
}