微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

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

2018-03-23 16:28 前端大全

(点击上方公众号,可快速关注)


英文:Julien Benchetrit  译文:枫上雾棋

segmentfault.com/a/1190000010624216


为什么要做加载


只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载


我是如何做的


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


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


  • 学会使用 CSS 中的 :after 和 :before

  • keyframe 动画直通车


开始入门


在开始一起构建它前, 我们先看看它最后的效果



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


  • 边框一个接一个地出现

  • 红/橙/白色方块向里滑入

  • 方块向外划出

  • 边框消失


我们只需要 animation-direction: alternate 来完成步骤 1 和 2, 步骤 3 和 步骤 4 我们可以使用 reverse, 另外, 我们可以使用 animation-iteration-count: infinite 重复动画


首先, 我们先书写好基本的 HTML 结构


<!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 本身, 而不是最终版本的效果


父级元素 logo, 不同颜色的方块都是它的子元素


<div class="logo">

  <div class="white"></div>

  <div class="orange"></div>

  <div class="red"></div>

</div>


我们用 less 来实现


.logo {

  positionrelative;

  width100px;

  height100px;

  border4px solid black;

  box-sizingborder-box;

  background-colorwhite;

 

  & > div {

    positionabsolute;

  }

 

  .red {

    top0;

    bottom0;

    left0;

    width27%;

    border-right4px solid black;

    background-color: #EA5664;

  }

  /* Similar code for div.orange and div.white */

}


logo 的效果图如下



边框动画


接下来, 我们将进入棘手(有趣)的部分


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


我们要把四个边框分割开来, 然后让它们有序地出现, 所以, 我们可以使用覆盖整个 div 的两个透明的伪元素


废话少说, 就让我们开始吧, 我们先做出它最初始的样子. 我们让 div.logo :: before 绝对位于 div.logo 的左上角,代表方块的上边框和右边框

, 让 div.logo::after 绝对定位 div.logo 的右下角, 代表方块的下边框和左边框


现在, less 代码变成了这样


.logo {

  positionrelative;

  width100px;

  height100px;

  box-sizingborder-box;

  background-colorwhite;

 

  &::before,

  &::after {

    content'';

    positionabsolute;

    width100%;

    height100%;

    box-sizingborder-box;

    border4px solid transparent;

  }

 

  &::before {

    top0;

    left0;

    border-top-colorblack;

    border-right-colorblack;

  }

 

  &::after {

    bottom0;

    right0;

    border-bottom-colorred; // Red for demo purposes only

    border-left-colorred;

  }

}


现在效果长这样



接下来, 我们就用 keyframe 做 div.logo::before 的第一个动画


我们将 width 和 height 初始都为 0, 然后用 keyframe 将 width 和

height 调整到 100%


随着我们在相应的时间把边框从透明变为黑色, 我们想要的最开始的效果就出来了


该代码展示了伪元素的初始动画


div.logo {

  &::before,

  &::after {

    /* ... */

    animation-timing-functionlinear;

  }

  &::before {

    /* ... */

    animationborder-before 1.5s infinite;

    animation-directionalternate;

  }

}

@keyframes border-before {

  0{

    width0;

    height0;

    border-right-colortransparent;

  }

  24.99{

    border-right-colortransparent;

  }

  25{

    height0;

    width100%;

    border-right-colorblack;

  }

  50%,

  100{

    width100%;

    height100%;

  }

}


我们对 div.logo::after 重复相同的操作, 不要忘了调整时间和反转 width 和 height. 现在, 我们就有了最外层边框的整个动画.


方块动画


最后,我们一起来设置方块的动画


我们最大的挑战是无法连接 keyframes。因为,我们最终想要的动画中每个小方框都有一定的顺序, 为此, 我们作如下改变


  • 0 to 25%:上边框和右边框显现

  • 25 to 50%:下边框和左边框显现

  • 50 to 65%:红色小方块显现

  • 65 to 80%:橙色小方块显现

  • 75 to 90%:白色小方块显现


红色小方框 keyframe 如下


@keyframes red {

  0%,

  50{

    width0;

    opacity0;

  }

  50.01{

    opacity1;

  }

  65%,

  100{

    width27%;

    opacity1;

  }

}


重复上面的代码,就可完成我们整个动画, 是不是很完美


总结


感谢你的阅读,最后附上 所有的源码(http://t.cn/R93jmwe),但个人建议,不要直接阅读源码,根据上面的提示在 codepen 中自己来一遍才是最佳实践



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 我所理解的前端 身份证号码的正则表达式及验证详解(JavaScript,Regex) 推荐15个 JavaScript 和 CSS 库 CSS布局解决方案(终结版) 50道CSS基础面试题(附答案)
猜您喜欢 robbin谈社区运营:封杀的艺术 为什么巨头公司总会在顷刻之间倒下?看看柯达你就明白了 “解剖”乐心手环:揭秘智能硬件背后的技术实践之道 使用Dozer优雅的将DO转换成VO 2017年编程语言排行榜:Python高居首位