如何只用CSS完成漂亮的加载

【51CTO晃荡】8.26 带你深度懂得清华大年夜学、搜狗基于算法的IT运维实践与摸索

【编辑推荐】

前端机能优化以及解决筹划
Web图片资本的加载与衬着机会
现代前端开起身术栈
前端实现文件的断点续传
前端面试中的常见的算法问题

【义务编辑：庞桂玉 TEL：（010）68476606】

若何只用CSS完成漂亮的加载

为什么要做加载

只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些器械的┞锋正控制, 我并不是鼓动大年夜家在每一个页面的前面都去加一个酷炫的加载

我是若何做的

不合的页面, 对加载的设计也就可能不合. 本文设计的加载合适大年夜多半页面.

并且, 本文假设读者已经异常熟悉伪元素, CSS 动画属性和keyframe, 如不雅读者想重温, 下面两篇文┞仿可做参考

学会应用 CSS 中的 :after 和 :before
keyframe 动画纵贯车

开端入门

在开端一路构建它前, 我们先看看它最后的效不雅

正如你所看到的, 我们将经历 4 个步调

边框一个接一个地出现
红/橙/白色方块向里滑入
方块向外划出
边框消掉

我们只须要 animation-direction: alternate 来完成步调 1 和 2, 步调 3 和步调 4 我们可以应用 reverse, 别的, 我们可以应用 animation-iteration-count: infinite 反复动画

起首, 我们先书写好根本的 HTML 构造

跟着我们在响应的时光把边框大年夜透明变为黑色, 我们想要的最开端的效不雅就出来了

CSS 不许可我们直接对 div.logo 的边框进行设置达到我们想要的效不雅, 所以我们必须去除原有的边框, 采取其他的办法来实现

<!doctype html> 
 
<html> 
 
  <head> 
 
    <!-- <link rel="preload"> for CSS, JS, and font files  --> 
 
    <style type="text/css"> 
 
      /* 
 
       *  All the CSS for the loader 
 
       *  Minified and vendor prefixed 
 
       */ 
 
    </style> 
 
  </head> 
 
  <body> 
 
    <div class="loader"> 
 
      <!-- HTML for the loader --> 
 
    </div> 
 
    <header /> 
 
    <main /> 
 
    <footer /> 
 
    <!-- Tags for CSS and JS files --> 
 
  </body> 
 
</html>

构建 logo 本身

一开端我们先实现 logo 本身, 而不是最终版本的效不雅

1/4 1 2 3 4 下一页尾页

　　推荐阅读

　　老网工: 浅谈SDN技术的部署和未来

【51CTO晃荡】8.26 带你深度懂得清华大年夜学、搜狗基于算法的IT运维实践与摸索进入2017年，基于SDN的解决筹>>>详细阅读

本文标题：如何只用CSS完成漂亮的加载

地址：http://www.17bianji.com/lsqh/36778.html

1/2 1