全国服务热线:4008-888-888

技术知识

迅速处理css应用@keyframes载入照片初次循环系统时

难题解說:

在应用css 的animations 特性时,初次载入循环系统会出現白色的空隙,看着有点像网页页面有更新的觉得,后边每次循环系统就不容易再有这个难题

难题演试

 

//html
 <div class="container">
        <div class="first"> </div>
  </div>
//less
.container {
  width: 100vw;
  height: 100%;
}
.container .first {
  width: 100vw;
  height: 100vh;
  animation: bgmove 10s infinite;
}
@keyframes bgmove {
  0% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑴.jpg") no-repeat center center;
    background-size: cover;
    opacity: 1;
  }
  15% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑴_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  30% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑵_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  45% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑷_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  60% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑸_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  80% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑴_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  100% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑴.jpg") no-repeat center center;
    background-size: cover;
    opacity: 1;
  }
}

处理方法

//less
.container {
  width: 100vw;
  height: 100%;
}
.container .first {
  width: 100vw;
  height: 100vh;
  background:url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG⑴.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG⑴\_1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG⑵\_1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG⑷\_1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG⑸\_1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG⑴\_1.jpg");
  animation: bgmove 10s infinite;
}
@keyframes bgmove {
  0% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑴.jpg") no-repeat center center;
    background-size: cover;
    opacity: 1;
  }
  15% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑴_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  30% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑵_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  45% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑷_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  60% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑸_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  80% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑴_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  100% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG⑴.jpg") no-repeat center center;
    background-size: cover;
    opacity: 1;
  }
}

最后实际效果

 

难题分析

照片的载入1般有两种状况, 照片的预载入 和 照片的懒载入 ,在这里就涉及到到照片的预载入难题,当网页页面的照片过量的情况下,服务器的工作压力就会大,载入照片1次性显示信息会有不连贯性因此在第1次将全部的照片都载入下来,这样后边在应用这些照片的情况下便是缓存文件在当地的資源,载入速率也会块许多,就不容易出現白色断层

到此这篇有关迅速处理css应用@keyframes载入照片初次循环系统时出現白色空隙难题(闪屏)的文章内容就详细介绍到这了,更多有关css keyframes载入照片內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服