大家好，我是半夏??，一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章，可以關注? 點贊 ?? 加我微信：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 >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 >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 >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 >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);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/471821.html
標籤：其他
上一篇：高級前端進階（五）
下一篇：vue - Vue中的ajax