整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
喜欢的求个免费的赞
为什么会写这种文章呢？平时开发的时候，我们遇到加载，要么是 UI 框架中自带，要么就是百度，然后 CV 到项目中？但是，自己实现的时候，又会没有思路。久而久之，变成了 CV 工程师。本文针对不同的加载方式，讲解其中的思路，希望大家不只是会用，更要是会写。实践才能出真知。
本文只介绍loading 文字加载。其他的会在其他文章中介绍。
仔细观察：文字的颜色是从底部往上面变化。有点像水波纹加载的效果。但是其实实现是很简单的。先给大家看一个例子。
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%的效果。加上动画的效果，在开始已经展示。
最简单的：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;
}
这是我觉得最有创意的文字加载了！！！
仔细观察，有几个点要特别注意。
字母 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);
}
}仔细观看，两个点；
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，但实际上更多的时候是因为我们了解不够，功夫不到家，才会觉得这个东西不友好，感到不喜欢，当你开始摆脱门外汉的姿态，真正踏进那个广袤的世界，能够对它的各种特点信手拈来，又会情不自禁地爱上这个东西。因此，有时候我们缺少的不是能力，而是一种包容的心态。
*请认真填写需求信息，我们会在24小时内与您取得联系。
