击右上方红色按钮关注“web秀”，让你真正秀起来

前言

以前说页面是动态，基本都是说数据是从数据库查询的，不是写死在html代码里面的。现在的说页面动态，一般会问：你是说数据，还是效果动态？

好的前端动画效果，能给用户带来非常舒适的体验效果，更甚者，有用户觉的你这个动画效果非常nice，反复操作，就为看你这个动画。停留时间，预览量上了，带来的收益也不是一丁点吧。

当然也不用为了动画，而额外的来制作动画效果。比如一个弹框，可以直接渐变出现的，你还加了飞了一圈出现，那就是不必要的动画了。

所以恰大好处的动画效果，能带来非常不错的效果。

下面我们来学习如果只做一些简单的动画效果：

grid布局

上图的动画，就是一个简单的loading加载效果，而且是一个3x3的九宫格。是因为旋转才变成一个菱形的样子。我们先来画出3x3的九宫格：

html

<div class="loading">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

这里用9个span来做每个格子元素。

css

body {
 margin: 0;
 height: 100vh; /*=100%*/
 display: flex; /*flex布局*/
 align-items: center; /*flex布局：垂直居中*/
 justify-content: center; /*flex布局：水平居中*/
 background-color: black;
}
.loading {
 width: 10em;
 height: 10em;
 display: grid; /*grid布局*/
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 0.5em; /*grid 每个item之间的间距*/
}
/**
* --name 是css中定义变量的方式
* 可以直接用 var(--name) 使用
*/
.loading span {
 background-color: var(--color); /*背景颜色*/
}
.loading span:nth-child(2n+2) {
 /*n=0: 2*/
 /*n=1: 4*/
 /*n=2: 6*/
 /*n=3: 8*/
 /*n=4: 10(不存在)*/
 --color: #f13f84;
}
.loading span:nth-child(4n+3) {
 /*n=0: 3*/
 /*n=1: 7*/
 /*n=2: 11(不存在)*/
 --color: #46b0ff;
}
.loading span:nth-child(4n+1) {
 /*n=0: 1*/
 /*n=1: 5*/
 /*n=2: 9*/
 /*n=3: 13(不存在)*/
 --color: #44bb44;
}

grid-template-columns: 该属性是基于 网格列. 的维度，去定义网格线的名称和网格轨道的尺寸大小。

repeat: 表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复列的表达式。

有了九宫格布局后，我们直接旋转这个loading元素，制作动画。

CSS3动画

.loading {
 ...
 transform: rotate(45deg); /*旋转45°*/
}
.loading span {
 background-color: var(--color);
 /**
 * 动画名字是blinking
 * 动画整个时间是2s
 * 每个元素的执行延时时间 var(--delay)
 * 动画的速度曲线 由慢到快 ease-in-out
 * 永久执行 infinite
 */
 animation: blinking 2s var(--delay) ease-in-out infinite;
 animation-fill-mode: backwards;
}
/**
* 每个元素执行动画延时时间变量
*/
.loading span:nth-child(7) {
 --delay: 0s;
}
.loading span:nth-child(4n+4) {
 --delay: 0.2s;
}
.loading span:nth-child(4n+1) {
 --delay: 0.4s;
}
.loading span:nth-child(4n+2) {
 --delay: 0.6s;
}
.loading span:nth-child(3) {
 --delay: 0.8s;
}
/**
* 动画效果
*/
@keyframes blinking {
 0%, 20% {
 transform: rotate(0deg) scale(0);
 }
 40%, 80% {
 /*
 * 旋转一圈rotate(1turn)[转、圈（Turns）。一个圆共1圈]
 * 缩放 scale 如果大于1就代表放大；如果小于1就代表缩小
 */
 transform: rotate(1turn) scale(1);
 }
 100% {
 transform: rotate(2turn) scale(0);
 }
}

animation语法

animation: name duration timing-function delay iteration-count direction;

1、animation-name 规定需要绑定到选择器的 keyframe 名称。

2、animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

3、animation-timing-function 规定动画的速度曲线。

4、animation-delay 规定在动画开始之前的延迟。

5、animation-iteration-count 规定动画应该播放的次数。

6、animation-direction 规定是否应该轮流反向播放动画。

动画的速度曲线

1、linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速)

2、ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。

3、ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。

4、ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。

5、ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。

6、cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

总结

CSS3动画基础知识可以看看 《如何快速上手基础的CSS3动画》 这篇文章，里面用更小的示例，讲述了CSS3动画的每个属性。CSS3动画，无外乎就是animation、transform、transition等属性的使用，记住他们每个的作用特效就可以了。

喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！

言

loading效果在实际开发中是很常见的，尤其是在Ajax请求的时候，可以给用户一个很好的交互体验。

今天这篇文章我们一起来看看如何通过CSS3实现各种不同的loading效果吧，文章中的代码可以从github自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/loading/loading.html

CSS3

实现效果

首先我们来看看需要实现的效果。

效果图

然后我们一个个来看都是怎么实现的吧。

loadingA

loadingA的效果就如音乐播放时的动态条一般，不停的连续执行。

其主要实现思路如下：

• 每个竖状条都是一个简单的div，div为一个小的圆形。

• 给每个div加上一个动画效果，该动画的效果是高度逐渐变长，最后再变回原样。

• 每个div延迟不同的时间才开始执行，这样就会有先后的层次感。

然后我们来看看各个部分的代码实现。

• 基本的div元素

基本的div元素是一个小的圆形。

基本的div元素

• 定义动画

定义的动画主要是改变div的高度，在完成50%的时候达到最高值，完成100%时恢复到原来高度。

动画效果

• 设置动画

将定义的动画添加至animation属性，设置一个动画总执行时间，然后给5个div设置不同的延时时间。

设置动画

• HTML元素

将以上设置的CSS属性都添加至HTML元素中。

HTML元素

将以上代码写完后，直接在浏览器运行就可以看到如loadingA的效果了。

loadingB

如果细心的看完loadingA的实现过程，一定可以联想到loadingB的实现。

loadingA是通过给高度加动画，那么loadingB就是通过给宽度加动画，同样给5个div不同的延迟时间。

这里我只给出其动画定义，其他的内容与loadingA类似，详细的内容可以通过github去看。

loadingB动画

loadingC

loadingC的实现效果如下。

loadingC

在loadingA和loadingB中是通过给高度和宽度增加动画实现的，而loadingC是通过给五个div增加纵向位移实现的。

loadingC实现的关键点就在于translateY的使用，因为动画是从下往上跳动，所以在完成度50%时，translateY设定为负值。

其定义的动画部分代码如下所示。

定义动画

loadingD

loadingD的实现效果如下。

loadingD效果

通过效果图我们发现有两点差异：

• loading过程中透明度会发生变化，这个通过opacity实现。

• 在接近完成时有个上下轻微抖动的效果，这个通过设置小单位的正负translateY值。

得到的动画代码如下。

loadingD动画

loadingE

loadingE的动画效果如下。

loadingE

loadingE的效果同loadingD类似，loadingD是通过纵向的位移变换，可以通过translateY实现。

loadingE是通过水平方向位移变换，可以通过translateX来实现。

而有一点不同的是，loadingE的div初始位置就是translateX(-300px)，表示从左侧开始运动。

loadingE动画

loadingF

loadingF定义的动画如下所示。

loadingF

loadingF是旋转效果，可以很容易想到是通过rotate实现。

loadingF中只有一个div，边框设置为虚线即可，其CSS样式如下。

loadingF基本样式

其定义的动画样式如下。

loadingF定义动画

loadingG&loadingH

loadingG与loadingH的动画效果如下。

loadingG&loadingH

loadingG与loadingH类似，loadingH在loadingG的基础上增加了几个点。

loadingG中是通过设置一个纵向的div-1，在该div-1内增加一个div-2，div-2就是转动的圆点，div-2通过绝对定位计算出实际位置，当div-1大小变化时，div-2也应该重新计算位置。

div-2的CSS代码如下所示。

loadingG基本样式

在loadingH中，div-1内有四个div，分别表示转动的四个圆点，也是通过绝对定位计算偏移位置。

最后设置动画，只需要让div-1在一个动画周期内旋转360度即可。

loadingG

loadingI

loadingI的效果图如下所示。

loadingI

loadingI的动画主要涉及到放大缩小和旋转两个方面，放大缩小通过scale实现，旋转通过rotate实现。具体的可以看看github上的完整代码。

结束语

今天这篇文章主要是教大家如何使用CSS3的动画特性去实现loading效果，完全可以不用借助于第三方库，大家也动动手自己实现一下吧。

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

昨天再次收到"月球居民爱丽丝"的投稿(非常感谢"月球居民爱丽丝")，希望做一个冰淇淋加载动画，原图：

看到如此美丽的冰淇淋是否想吃了？哈哈，大冬天的，还是不要了。今天我们就用CSS来制作一个冰淇淋吧。

解析

1、 抛开动画部分，冰淇淋分为2部分，能吃的冰淇淋和下方的木棍（都是可以直接用样式画出的）

2、 动画部分，细数有4种颜色，红色、米色、蓝色、橙色。

3、 冰淇淋左上方的高光效果

通过这样的解析，你是不是也可以制作一个简单冰淇淋了呢？

下面我们按步骤实现。

第一步（结构）

<div class="ice-cream"> 
 <div class="body"></div> 
 <div class="footer"></div> 
</div>

按照解析，我们把它也分成上下结构2部分，身体（冰淇淋）、脚（木棍）。

.ice-cream{ 
 width: 50px; 
 height: 120px; 
 margin: 100px auto; 
} 
.body{ 
 margin: 0 auto; 
 width: 50px; 
 height: 100px; 
 border-radius: 30px 30px 10px 10px; 
 background: red; 
} 
.footer{ 
 width: 10px; 
 height: 15px; 
 margin: 0 auto; 
 border-radius: 0 0 4px 4px; 
 background: #a77b64; 
}

这个效果相信很多小伙伴都会实现，2部分都是通过border-radius圆角来改变形状。这里就不做多的说明了。

第二步（动画）

同理，按解析，我们添加4种颜色到冰淇淋上面。

... 
<div class="body"> 
 <div class="loading"> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 </div> 
</div>

添加不同颜色

.body{ 
 position: relative; 
 ... 
} 
... 
.loading{ 
 position: absolute; 
 width: 200px; 
} 
.loading .line{ 
 height: 40px; 
} 
.loading .line:nth-child(1){ 
 background: #ff7632; 
} 
.loading .line:nth-child(2){ 
 background: #46b0ff; 
} 
.loading .line:nth-child(3){ 
 background: #fffce5; 
} 
.loading .line:nth-child(4){ 
 background: red; 
}

发现把我们的整个冰淇淋都个盖住了，这时只需要添加overflow: hidden;即可。

.body{ 
 ... 
 overflow: hidden; 
}

然后我们把颜色部分旋转一个角度，并且使其动起来。

.loading{ 
 position: absolute; 
 width: 200px; 
 top: -77px; 
 left: -89px; 
 transform: rotate(45deg); 
 animation: move 2.5s linear infinite; 
} 
@keyframes move{ 
 from { 
 top: -77px; 
 left: -89px; 
 } 
 to { 
 top: 9px; 
 left: -84px; 
 } 
}

这时候你会发现怎么调整，动画中间都会有断层。

所以我的解决方案是，重新copy一份颜色，让其可持续循环的。

<div class="loading"> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
 <div class="line"></div> 
</div>
.loading{ 
 position: absolute; 
 top: -213px; 
 left: -27px; 
 width: 200px; 
 transform: rotate(45deg); 
 animation: move 2.5s linear infinite; 
} 
@keyframes move{ 
 from { 
 top: -213px; 
 left: -27px; 
 } 
 to { 
 top: -46px; 
 left: -83px; 
 } 
} 
.loading .line{ 
 height: 40px; 
} 
.loading .line:nth-child(1), 
.loading .line:nth-child(5){ 
 background: #ff7632; 
} 
.loading .line:nth-child(2), 
.loading .line:nth-child(6){ 
 background: #46b0ff; 
} 
.loading .line:nth-child(3), 
.loading .line:nth-child(7){ 
 background: #fffce5; 
} 
.loading .line:nth-child(4), 
.loading .line:nth-child(8){ 
 background: red; 
}

第三步（高光效果）

这个就是在body上面添加一个圆弧。

大家应该都看过前面的CSS3动画解析抖音 LOGO制作文章了，这里面有制作圆弧的示例。

.body:before{ 
 position: absolute; 
 content: ""; 
 width: 25px; 
 height: 25px; 
 border: 5px solid #fff; 
 border-right: 5px solid transparent; 
 border-top: 5px solid transparent; 
 border-left: 5px solid transparent; 
 border-radius: 100%; 
 top: 5px; 
 left: 5px; 
 transform: rotate(120deg); 
 opacity: 0.7; 
 z-index: 10; 
}

利用border画出1/4的圆，就可以啦。

最终效果：

不知道大家有没有get到每次开发的小经验了？开发前先分析，分小步骤，完成各个功能点。

公告

喜欢小编的点击关注，了解更多知识！

源码地址和源文件下载请点击下方“了解更多”