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

时间 2019-11-06 标签如何只用 css 完成漂亮加载

为何要作加载

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

我是如何作的

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

而且, 本文假设读者已经很是熟悉伪元素, CSS 动画属性和keyframe, 若是读者想重温, 下面两篇文章可作参考less

开始入门

在开始一块儿构建它前, 咱们先看看它最后的效果动画

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

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

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

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

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

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

<div class="logo">
  <div class="white"></div>
  <div class="orange"></div>
  <div class="red"></div>
</div>

咱们用 less 来实现图片

.logo {
  position: relative;
  width: 100px;
  height: 100px;
  border: 4px solid black;
  box-sizing: border-box;
  background-color: white;

  & > div {
    position: absolute;
  }

  .red {
    top: 0;
    bottom: 0;
    left: 0;
    width: 27%;
    border-right: 4px 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 {
  position: relative;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  background-color: white;

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 4px solid transparent;
  }

  &::before {
    top: 0;
    left: 0;
    border-top-color: black;
    border-right-color: black;
  }

  &::after {
    bottom: 0;
    right: 0;
    border-bottom-color: red; // Red for demo purposes only
    border-left-color: red;
  }
}

如今效果长这样

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

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

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

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

div.logo {
  &::before,
  &::after {
    /* ... */
    animation-timing-function: linear;
  }
  &::before {
    /* ... */
    animation: border-before 1.5s infinite;
    animation-direction: alternate;
  }
}
@keyframes border-before {
  0% {
    width: 0;
    height: 0;
    border-right-color: transparent;
  }
  24.99% {
    border-right-color: transparent;
  }
  25% {
    height: 0;
    width: 100%;
    border-right-color: black;
  }
  50%,
  100% {
    width: 100%;
    height: 100%;
  }
}

咱们对 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% {
    width: 0;
    opacity: 0;
  }
  50.01% {
    opacity: 1;
  }
  65%,
  100% {
    width: 27%;
    opacity: 1;
  }
}

重复上面的代码，就可完成咱们整个动画，是否是很完美

总结

感谢你的阅读，最后附上全部的源码，但我的建议，不要直接阅读源码，根据上面的提示在 codepen 中本身来一遍才是最佳实践

原文连接: How to create a beautiful animated loader with nothing but CSS (Julien Benchetrit)