纯 CSS 撸1个好看的载入

2021-03-17 17:19 jianzhan

为何要做载入

只想说, 本文最关键的是对 CSS, 伪元素, keyframe的共享, 和读者对这些物品的真实把握, 我其实不是鼓动大伙儿在每个网页页面的前面都去加1个炫酷的载入

我是怎样做的

不一样的网页页面, 对载入的设计方案也便可能不一样. 本文设计方案的载入合适大多数数网页页面.

而且, 本文假定读者早已十分熟习伪元素, CSS 动漫特性和keyframe, 假如读者想重温, 下面两篇文章内容可做参照

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

keyframe 动漫直达车

刚开始新手入门

在刚开始1起搭建它前, 大家先看看它最终的实际效果

正如你所看到的, 大家将亲身经历 4 个流程

边框1个接1个地出現
红/橙/白色方块向里滑入
方块向外划出
边框消退

大家只必须 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 自身

1刚开始大家先完成 logo 自身, 而并不是最后版本号的实际效果

父级元素 logo, 不一样色调的方块全是它的子元素

<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 的边框开展设定做到大家要想的实际效果, 因此大家务必除去原来的边框, 选用别的的方法来完成

大家要把4个边框切分起来, 随后让它们井然有序地出現, 因此, 大家可使用遮盖全部 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 的第1个动漫

大家将 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. 如今, 大家就有了最外层边框的全部动漫.

方块动漫

最终，大家1起来设定方块的动漫

大家最大的挑戰是没法联接 keyframes。由于，大家最后要想的动漫中每一个小方框都有1定的次序，为此，大家作以下更改

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;
  }
}

反复上面的编码，便可进行大家全部动漫，是否很完善

总结

谢谢你的阅读文章，最终附上全部的源代码（http://t.cn/R93jmwe），但本人提议，不必立即阅读文章源代码，依据上面的提醒在 codepen 中自身来1遍才是最好实践活动

纯 CSS 撸1个好看的载入

为您推荐