跳动的“loading”，个个都很惊艳

言

喜欢的求个免费的赞

为什么会写这种文章呢？平时开发的时候，我们遇到加载，要么是 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);
    }
  }

原文来源：https://blog.csdn.net/shangyanaf/article/details/124836122?spm=1000.2115.3001.6382&utm_medium=distribute.pc_feed_v2.none-task-blog-hot-6-124836122-null-null.pc_personrec&depth_1-utm_source=distribute.pc_feed_v2.none-task-blog-hot-6-124836122-null-null.pc_personrec

“做程序员，圈子和学习最重要”因为有有了圈子可以让你少走弯路，扩宽人脉，扩展思路，学习他人的一些经验及学习方法！同时在这分享一下是一直以来整理的Java后端进阶笔记文档和学习资料免费分享给大家！需要资料的朋友私信我扣【06】

言

“字节跳动”现今也是如日中天，旗下产品，除头条外，还有短视频平台“抖音”，人气也是非常高，据说拥有7亿用户。

今天我们就来研究研究抖音的logo，蹭蹭热度。

效果预览：

CSS3动画解析抖音 LOGO制作

章出处：趣味CSS3效果挑战小汇总

挑战1: 画一个对话框

要画一个对话框，首先来学习做一个三角形。其实非常的简单。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .triangle{
 width: 0;
 height: 0;
 border: 50px solid;
 border-color: #f00 #0f0 #ccc #00f;
 }
 </style>
</head>
<body>
 <div class="triangle"></div>
</body>
</html>

出现如下效果：

估计你已经知道border的构成原理，然后只需改一行代码：

// 四个参数对应 ：上 右 下 左
border-color: transparent transparent #ccc transparent;

于是就只剩下面的三角形部分啦！

现在来利用三角形技术做对话框：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .dialog {
 position: relative;
 margin-top: 50px;
 margin-left: 50px;
 padding-left: 20px;
 width: 300px;
 line-height: 2;
 background: lightblue;
 color: #fff;
 }
 .dialog::before {
 content: '';
 position: absolute;
 border: 8px solid;
 border-color: transparent lightblue transparent transparent;
 left: -16px;
 top: 8px;
 }
 </style>
</head>
<body>
 <div class="dialog">这是一个对话框鸭！</div>
</body>
</html>

效果如下：

挑战2: 画一个平行四边形

利用skew特性，第一个参数为x轴倾斜的角度，第二个参数为y轴倾斜的角度。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .parallel {
 margin-top: 50px;
 margin-left: 50px;
 width: 200px;
 height: 100px;
 background: lightblue;
 transform: skew(-20deg, 0);
 }
 </style>
</head>
<body>
 <div class="parallel"></div>
</body>
</html>

大家可以自己动手试试。效果如下：

挑战3: 用一个div画五角星

对于这个五角星而言，我们可以拆分成三个部分，想一想是不是这样？

那我们现在就来实现这三个部分。对于最上面的三角，我们在第一个部分已经实现了三角形，这个不难。但是下面的两个如何实现呢？

其实也非常的简单，想一想，下面这两个是不是就是一个向上的三角形旋转而来呢？明白了这一点，就可以动手实现啦！

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 #star {
 position: relative;
 margin: 200px auto;
 width: 0;
 height: 0;
 border-style: solid;
 border-color: transparent transparent red transparent;
 border-width: 70px 100px;
 transform: rotate(35deg);
 }
 #star::before {
 position: absolute;
 content: '';
 width: 0;
 height: 0;
 top: -128px;
 left: -95px;
 border-style: solid;
 border-color: transparent transparent red transparent;
 border-width: 80px 30px;
 transform: rotate(-35deg);
 }
 #star::after {
 position: absolute;
 content: '';
 width: 0;
 height: 0;
 top: -45px;
 left: -140px;
 border-style: solid;
 border-color: transparent transparent red transparent;
 border-width: 70px 100px;
 transform: rotate(-70deg);
 }
 </style>
</head>
<body>
 <div id="star"></div>
</body>
</html>

效果如下：

你没看错，这就是CSS3的威力！

挑战4: 画一个爱心

看起来好像不容易下手，我们先来分解一下这个心形的结构：

是两个形状相同的部分，对其中一种稍微旋转一下：

现在就来构造这个部分：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .heart {
 width: 100px;
 height: 90px;
 position: relative;
 margin: 100px auto;
 }
 .heart::before {
 content: '';
 position: absolute;
 width: 50px;
 height: 90px;
 background: red;
 border-radius: 50px 45px 0 0;
 /* 设置旋转中心 */
 transform-origin: 0 100%;
 transform: rotate(-45deg);
 }
 .heart::after {
 content: '';
 position: absolute;
 width: 50px;
 height: 90px;
 top: -35px;
 left: -35px;
 background: red;
 border-radius: 50px 45px 0 0;
 /* 设置旋转中心 */
 transform-origin: 0 100%;
 transform: rotate(45deg);
 }
 </style>
</head>
<body>
 <div class="heart"></div>
</body>
</html>

效果如下：

同样一个div完成了这个效果，是不是非常酷炫呢：)

关注我的头条号，分享更多的技术学习文章，我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

挑战5: 画一个八卦阵

还是来分解它的结构：

按照之前的思路，估计你也有想法了，这个时候依然可以用伪类来画出两个小的圆，那么问题来了，像这种颜色不同的同心圆如何用CSS表达呢？

其实很简单，根据border-radius可以影响padding的形状这一规则，外面的一圈用border来表达，而中间利用白色的背景颜色将padding填满，宽度和高度都可以设为0。

另一个问题是:大圆的效果如何实现？有两种实现思路，一种是用border-left来表示左边的半圆，右边的半圆利用本身的宽度。第二种方案其实是从《CSS揭秘》获得的灵感，可以利用linear-gradient颜色渐变的属性来调整。

接下来编码实现：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 body{
 background-color: #ccc;
 }
 /* 大圆部分第一种思路 (注意下面的小圆定位要调整下)*/
 /* .bagua{
 position: relative;
 width: 150px;
 height: 300px;
 margin: 100px auto;
 border-radius: 50%;
 background-color: #fff;
 border-left: 150px solid #000;
 } */
 /* 大圆部分第二种思路 */
 .bagua{
 position: relative;
 width: 300px;
 height: 300px;
 margin: 100px auto;
 border-radius: 50%;
 background-color: #000;
 /*从0-50%用背景色，50%开始到100%用#fff */
 background-image: linear-gradient(to right, transparent 50%, #fff 50%);
 }
 .bagua::before{
 content: '';
 position: absolute;
 left: 75px;
 width: 0;
 height: 0;
 padding: 25px;
 border-radius: 50%;
 border: 50px solid #000;
 background: #fff;
 background-clip: padding-box;
 }
 .bagua::after{
 content: '';
 position: absolute;
 top: 150px;
 left: 75px;
 width: 0;
 height: 0;
 padding: 25px;
 border-radius: 50%;
 border: 50px solid #fff;
 background: #000;
 background-clip: padding-box;
 }
 </style>
</head>
<body>
 <div class="bagua"></div>
</body>
</html>

效果如下：

挑战6: 超级棒棒糖

这里直接摆出效果吧：

其中利用了两个CSS3中非常重要的属性————线性渐变和径向渐变。其中圆形部分利用radial-gradient属性，也就是径向渐变，棒子的颜色利用linear-gradient，之前已经用过，也就是线性渐变。

代码参考如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .linear{
 width: 300px;
 height: 300px;
 margin: 20px auto;
 border-radius: 50%;
 /* 重复性径向渐变 */
 background-image: repeating-radial-gradient(red 0px, green 30px, orange 40px);
 position: relative;
 }
 .linear::after{
 content: '';
 position: absolute;
 top: 100%;
 left: 50%;
 width: 10px;
 height: 500px;
 border-radius: 0 0 10px 10px;
 /* 线性渐变 */
 background-image: linear-gradient(to top, red 20%, orange 40%, lightblue 60%, green 80%);
 }
 </style>
</head>
<body>
 <div class="linear"></div>
</body>
</html>

挑战7：跳动的字节

相当于是一个loading的效果。其实实现起来是非常简单的，这里直接用animation-delay即可控制五个元素的错落感。直接贴上代码，大家可以参考一下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>JS Bin</title>
 <style>
 .spinner{
 margin: 100px auto;
 width: 50px;
 height: 50px;
 text-align: center;
 font-size: 10px;
 }
 
 .spinner > div{
 display: inline-block;
 background-color: rgb(43, 128, 226);
 height: 100%;
 width: 5px;
 margin-right:1px;
 animation: bytedance 1s infinite;
 }
 
 .spinner >div:nth-child(2) {
 background-color: rgb(49, 84, 124);
 animation-delay: -0.9s;
 }
 .spinner >div:nth-child(3) {
 background-color: rgb(88, 128, 173);
 animation-delay: -0.8s;
 }
 .spinner >div:nth-child(4) {
 background-color: rgb(88, 128, 173);
 animation-delay: -0.7s;
 }
 .spinner >div:nth-child(5) {
 background-color: rgb(142, 187, 240);
 animation-delay: -0.6s;
 } 
 
 @keyframes bytedance{
 0%, 40%, 100%{
 transform: scaleY(0.4);
 }
 20%{
 transform: scaleY(1);
 }
 }
 </style>
</head>
<body>
 <div class="spinner">
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 </div>
</body>
</html>

挑战8: 涟漪缓动效果

这里显然可以分解成两个圆，仍然是利用animation-delay来实现错落感。当一个圆缩小为0的时候，另一圆刚好扩展为最大，依次规律循环。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Loading</title>
 <style>
 .spinner{
 width: 60px;
 height: 60px;
 position: relative;
 margin: 100px auto;
 }
 
 .spinner > div{
 width: 100%;
 height: 100%;
 opacity: 0.6;
 border-radius: 50%;
 background-color: lightblue;
 position: absolute;
 top: 0;
 left: 0;
 animation: loading 1.4s infinite ease-in;
 }
 
 .spinner > div:nth-child(2){
 animation-delay: -0.7s;
 }
 
 @keyframes loading{
 0%, 100% {
 transform: scale(0.0);
 }
 50% {
 transform: scale(1.0);
 }
 
 }
 </style>
</head>
<body>
 <div class="spinner">
 <div></div>
 <div></div>
 </div>
</body>
</html>

通过这些有趣的挑战，相信你已经体会到CSS3世界的奇妙了，但是但是，有部分属性并不是所有的浏览器都支持，保守起见，最好在CSS3新特性名之前加上浏览器的前缀，本文侧重效果的实现，兼容这块暂不做处理。

作为前端工程师，平时通常拿CSS做页面布局，甚至有时候会出现很多莫名其妙的bug，于是很多人不太愿意来写CSS，但实际上更多的时候是因为我们了解不够，功夫不到家，才会觉得这个东西不友好，感到不喜欢，当你开始摆脱门外汉的姿态，真正踏进那个广袤的世界，能够对它的各种特点信手拈来，又会情不自禁地爱上这个东西。因此，有时候我们缺少的不是能力，而是一种包容的心态。

在线咨询

上一篇：JavaScript 运行机制(Event Loop
下一篇：网络安全干货分享 - 2022 年最佳 SQL 注入

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

跳动的“loading”，个个都很惊艳

言

loader-1

实现逻辑

完整代码

loader-2

实现逻辑

完整代码

loader-3

实现逻辑

完整代码

loader-4

实现逻辑

完整代码

您的项目需求