大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜爱我的文章,能够关注➕ 点赞 加我微信:frontendpicker,一起学习交换前端,成为更优良的工程师~关注公众号:搞前端的半夏,理解更多前端常识! 点我摸索新世界!

原文链接 ==>http://sylblog.xin/archives/72

前言

喜爱的求个收费的赞

为什么会写这种文章呢?平时开发的时候,咱们遇到加载,要么是 UI 框架中自带,要么就是百度,而后 CV 到我的项目中?然而,本人实现的时候,又会没有思路。长此以往,变成了 CV 工程师。本文针对不同的加载形式,解说其中的思路,心愿大家不只是会用,更要是会写。实际能力出真知。

本文只介绍loading 文字加载。其余的会在其余文章中介绍。

loader-1

实现逻辑

仔细观察:文字的色彩是从底部往上面变动。有点像水波纹加载的成果。然而其实实现是很简略的。先给大家看一个例子。

div{  font-size:30px;  height:20px;  overflow: hidden;}<div>content</div>

这样最终的成果:文字只呈现了一半。

那么大家的思路是不是就进去了。是不是只有有两个重叠的 div 一个红色的字,一个红色的字。用动画让红色字 div 的高度逐步缩小,是不是就能够实现这个成果。没错,是能够。

不过,咱们只须要一个 div 也能够干成这件事。:after 或者:before 也能够干成这件事。

动画该如何设计呢;其实很简略设置高度从 100% 到 0 就能够了。

  @keyframes loaderHeight {    0% {      height: 100%;    }    100% {      height: 0%;    }  }

残缺代码

首先定义一个文字色彩为红色的底。

.loader-1 {    font-size: 48px;    font-family: Arial, Helvetica, sans-serif;    font-weight: bold;    color: #FF3D00;    letter-spacing: 2px;    position: relative;}<span class="loader-1">Loading</span>

而后利用:after 加上下层。

.loader-1::after {    content: "Loading";    position: absolute;    left: 0;    top: 0;    color: #FFF;    width: 100%;    height: 50%;    overflow: hidden;    animation: loaderHeight 6s linear infinite;}

这就是高度为 50%的成果。加上动画的成果,在开始曾经展现。

loader-2

实现逻辑

最简略的:laoder-1 是从下往上,这个就是从左往右,那不就和 width 无关吗?

不过这里还有另一个点。那就是文字的成果。底层文字是有暗影的。看上去两头是空心的,其实不是,这只是因为背景色彩和文字自身的色彩统一。
我换个色彩,就分明了。

在 CSS 中文字的暗影是 text-shadow。

text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 1px #fff;

动画在这里就很简略了,loader-1 管制了 height,这里管制 width 就能够了。

  @keyframes loderWidth {    0% {      width: 0%;    }    100% {      width: 100%;    }  }

残缺代码

.loader-2{    font-size: 48px;    font-family: Arial, Helvetica, sans-serif;    font-weight: bold;    color: #263238;    text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 1px #fff;    letter-spacing: 2px;    position: relative;}<span class="loader-2">Loading </span>
.loader-2::after {    content: "Loading";    position: absolute;    left: 0;    top: 0;    color: #FFF;    width: 100%;    height: 100%;    overflow: hidden;    animation: loderWidth 6s linear infinite;}

loader-3


这是我感觉最有创意的文字加载了!!!

实现逻辑

仔细观察,有几个点要特地留神。

  • 字母 L,那条会动的大写 L,有没有感觉拐角很不天然,其实下面那个 I 并不是 L 的,而是独自的,只是在下面一层。
  • 字母 I,认真看前面的字母 I,他是动态变化的,然而它的这个动,也不是整个静止的,只有下面的一点点在动。
  • 小球:小球是静止的,当小球到字母的地位,字母才会动。

最初我拆分一下。

合成完了,咱们来钻研一下怎么做。咱们不思考其余的比方减少 div 之类的,就单纯的用:after 和:before 来实现。这里有人可能会说了,你这里有四个多进去的,只有两个标签怎么实现?很简略,元素自身的确只有一个,然而元素能够减少很多内容啊。比方 border,暗影之类的。

讲到这里,是不是有点思路了,你看啊,1 和 2 是不是能够用暗影实现啊,3 和 4 用 after 和 before 实现。

残缺代码

这里用了一个空格来占位。

<span class="loader-3">Load&nbsp;ng </span>.loader-3 {  color: #FFF;  position: relative;  font-family: Arial, Helvetica, sans-serif;  font-size: 48px;  letter-spacing: 4px;}

上面是 before

  .loader-3::before {    content: "";    position: absolute;    right: 70px;    bottom: 10px;    height: 28px;    width: 5.15px;    background: currentColor;    animation: loaderL 1s linear infinite alternate;  }

成果如下,能够看到 3 曾经进去了,然而 1 和 2 并没有呈现,这是因为咱们还没有加上暗影。

加上这个动画,咱们就能够看到成果了。

  @keyframes loaderL {    0% {      box-shadow: 0 -6px, -122.9px -8px;    }    25%, 75% {      box-shadow: 0 0px, -122.9px -8px;    }    100% {      box-shadow: 0 0px, -122.9px -16px;    }  }


加上小球

.loader-3::after {    content: "";    width: 10px;    height: 10px;    position: absolute;    left: 125px;    top: 2px;    border-radius: 50%;    background: red;    animation: animloader113 1s linear infinite alternate;  }

最初加上小球的动画。

 @keyframes animloader113 {    0% {      transform: translate(0px, 0px) scaleX(1);    }    14% {      transform: translate(-12px, -16px) scaleX(1.05);    }    28% {      transform: translate(-27px, -28px) scaleX(1.07);    }    42% {      transform: translate(-46px, -35px) scaleX(1.1);    }    57% {      transform: translate(-70px, -37px) scaleX(1.1);    }    71% {      transform: translate(-94px, -32px) scaleX(1.07);    }    85% {      transform: translate(-111px, -22px) scaleX(1.05);    }    100% {      transform: translate(-125px, -9px) scaleX(1);    }  }

loader-4

实现逻辑

仔细观看,两个点;

  • 文字在暗影的状态下歪斜。
  • 文字变含糊

CSS中歪斜: transform: skew()

CSS含糊:高斯含糊 filter: blur(0px)

残缺代码

<span class="loader-4">Loading </span>.loader-119 {    font-size: 48px;    letter-spacing: 2px;    color: #FFF;    animation: loader4 1s ease-in infinite alternate;}

动画

 @-webkit-keyframes loader4 {    0% {      filter: blur(0px);      transform: skew(0deg);    }    100% {      filter: blur(3px);      transform: skew(-4deg);    }  }