共计 3567 个字符，预计需要花费 9 分钟才能阅读完成。
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员. 如果喜爱我的文章，能够关注➕ 点赞 👍 加我微信：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 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);
}
}
