码库记事本

码库记事本

纯 CSS 撸一个漂亮的加载

小诸哥 0

一个页面想给用户带来好的用户体验,页面加载效果非常有必要。这篇文章主要介绍了纯 CSS 撸一个漂亮的加载,需要的朋友可以参考下

为什么要做加载

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

我是如何做的

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

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

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

keyframe 动画直通车

开始入门

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

 

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

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

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

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

  1. <!doctype html>
  2. <html>
  3.      <head>
  4.      <!-- <link rel="preload"> for CSS, js, and font files -->
  5.      <style type="text/css">
  6.          /*
  7.          * All the CSS for the loader
  8.          * Minified and vendor prefixed
  9.          */
  10.      </style>
  11.      </head>
  12.      <body>
  13.      <div class="loader">
  14.          <!-- HTML for the loader -->
  15.      </div>
  16.      <header />
  17.      <main />
  18.      <footer />
  19.      <!-- Tags for CSS and JS files -->
  20.      </body>
  21. </html>

 

构建 logo 本身

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

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

  1. <div class="logo">
  2.      <div class="white"></div>
  3.      <div class="orange"></div>;
  4.      <div class="red"></div>
  5. </div>

我们用 less 来实现

  1. .logo {
  2.      position: relative;
  3.      width: 100px;
  4.      height: 100px;
  5.      border: 4px solid black;
  6.      box-sizing: border-box;
  7.      background-color: white;
  8.      & > div {
  9.      position: absolute;
  10.      }
  11.      .red {
  12.      top: 0;
  13.      bottom: 0;
  14.      left: 0;
  15.      width: 27%;
  16.      border-right: 4px solid black;
  17.      background-color: #EA5664;
  18.      }
  19.      /* Similar code for div.orange and div.white */
  20. }

 

logo 的效果图如下

边框动画

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

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

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

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

现在, less 代码变成了这样

  1. .logo {
  2.      position: relative;
  3.      width: 100px;
  4.      height: 100px;
  5.      box-sizing: border-box;
  6.      background-color: white;
  7.      &::before,
  8.      &::after {
  9.      content: '';
  10.      position: absolute;
  11.      width: 100%;
  12.      height: 100%;
  13.      box-sizing: border-box;
  14.      border: 4px solid transparent;
  15.      }
  16.      &::before {
  17.      top: 0;
  18.      left: 0;
  19.      border-top-color: black;
  20.      border-right-color: black;
  21.      }
  22.      &::after {
  23.      bottom: 0;
  24.      right: 0;
  25.      border-bottom-color: red; // Red for demo purposes only
  26.      border-left-color: red;
  27.      }
  28. }

 

现在效果长这样

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

我们将 width 和 height 初始都为 0, 然后用 keyframe 将 width 和
height 调整到 100%

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

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

  1. div.logo {
  2.      &::before,
  3.      &::after {
  4.      /* ... */
  5.      animation-timing-function: linear;
  6.      }
  7.      &::before {
  8.      /* ... */
  9.      animation: border-before 1.5s infinite;
  10.      animation-direction: alternate;
  11.      }
  12. }
  13. @keyframes border-before {
  14.      0% {
  15.      width: 0;
  16.      height: 0;
  17.      border-right-color: transparent;
  18.      }
  19.      24.99% {
  20.      border-right-color: transparent;
  21.      }
  22.      25% {
  23.      height: 0;
  24.      width: 100%;
  25.      border-right-color: black;
  26.      }
  27.      50%,
  28.      100% {
  29.      width: 100%;
  30.      height: 100%;
  31.      }
  32. }

 

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

方块动画

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

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

  • 0 to 25%:上边框和右边框显现
  • 25 to 50%:下边框和左边框显现
  • 50 to 65%:红色小方块显现
  • 65 to 80%:橙色小方块显现
  • 75 to 90%:白色小方块显现

红色小方框 keyframe 如下

  1. @keyframes red {
  2.      0%,
  3.      50% {
  4.      width: 0;
  5.      opacity: 0;
  6.      }
  7.      50.01% {
  8.      opacity: 1;
  9.      }
  10.      65%,
  11.      100% {
  12.      width: 27%;
  13.      opacity: 1;
  14.      }
  15. }

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

总结

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

标签: CSS 加载