试想一下，如果你的网站在加载过程中，loading图由一个老旧的菊花转动图片，变为一个红色的心形loading特效，那该有多炫酷啊。
目录
实现思路
初始化HTML部分
延迟动画是重点
设定动画效果
完整源代码
最后
实现思路
- 每个竖线由一个li标签来实现，当然，我们需要设定他的起始高度，并且设定色值，设定圆角；
- 由于是loading图，需要在整体页面的垂直和水平居中，这涉及到CSS3的flex布局学习；
- 动画特效，就需要使用到animation动画了，需要与@keyframes配合使用；
- 最重要的是这个loading过程，需要设置一定的动画延迟，而不是使用javascript的setTimeout来实现。
可以说，CSS3的成熟，在很多程度上节约了JS的使用，节省了图片的网络请求与加载，这也是网站性能优化的很大体现。
初始化HTML部分
loading图的初始化，需要准备9个 li 标签，而 li 标签的父元素需要相对于整个页面垂直水平居中，而几乎所有的loading图也都是相对于整体网站居中对齐的，这里需要保持一致。
这一小部分，需要学习到的CSS3知识点有，flex布局、justify-content水平居中、align-items垂直居中、border-radius圆角设置等。代码如下：
<!-- HTML5部分 -->
<div id="he">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
// CSS3部分
*{
padding: 0;
margin: 0;
list-style: none;
}
#he{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #232e6d;
}
ul{
height: 200px;
}
li{
float: left;
width: 20px;
height: 20px;
border-radius: 20px;
margin-right: 10px;
background-color: red;
}初始化代码后，你可以看到的效果是这样子的，效果如图：
延迟动画是重点
由于要做的是一个CSS3的loading图，所以就需要从左到右的依次动效，而不是突然就变成一个心形了，这样起不到用户等待的效果。
而依次动效，平时一般使用setTimeout，然后获取每个DOM元素，再依次改变起CSS样式，或者直接修改style行内样式，但CSS3的成熟，大大减小了这方面的性能支出。CSS3设定代码如下：
li:nth-child(1){
animation: love1 4s infinite;
}
li:nth-child(2){
animation: love2 4s infinite;
animation-delay: 0.15s;
}
li:nth-child(3){
animation: love3 4s infinite;
animation-delay: 0.3s;
}
li:nth-child(4){
animation: love4 4s infinite;
animation-delay: 0.45s;
}
li:nth-child(5){
animation: love5 4s infinite;
animation-delay: 0.6s;
}
li:nth-child(6){
animation: love4 4s infinite;
animation-delay: 0.75s;
}
li:nth-child(7){
animation: love3 4s infinite;
animation-delay: 0.9s;
}
li:nth-child(8){
animation: love2 4s infinite;
animation-delay: 1.05s;
}
li:nth-child(9){
animation: love1 4s infinite;
animation-delay: 1.2s;
}设定动画效果
然后就可以设定动画效果了，虽然看上去是9个 li 元素，但仔细观察，其实左右对称，也就是写5份动画@keyframes就可以了，因为第一个和最后一个的动效过程是一样的，依次往下看，只有中间部分，心形的尖头部分特立独行，单独为他准备一份CSS设定即可。
但需要注意的是：这个依次的动效过程，就需要设定好每份样式的起始高度和结束高度，再然后这里面有一个translateY的高度延伸
CSS3代码设定如下：
@keyframes love1{
30%,50%{height: 60px; transform: translateY(-30px);}
75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love2{
30%,50%{height: 125px; transform: translateY(-62.5px);}
75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love3{
30%,50%{height: 160px; transform: translateY(-75px);}
75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love4{
30%,50%{height: 180px; transform: translateY(-60px);}
75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love5{
30%,50%{height: 190px; transform: translateY(-45px);}
75%,100%{height: 20px; transform: translateY(0);}
}完整源代码
前面说了这么多，怕你看的不够仔细，所以我这里放一下完整的源代码，你可以通过以下步骤自己拿到源代码
- 新建一个txt文档，如 CSS动效.txt 这样的文档
- 将 txt 文本后缀改为 html
- 使用一个开发工具，例如VSCode，sublime，或者直接txt文本工具打开都行（前端开发最初吸引我的地方就是，无需任何特殊环境，只要在一个文本里就可以书写代码，而且可以直接利用浏览器查看效果，这简直太酷了，其他语言可以吗？当然，汉语也不错，你直接张嘴就说，更不需要环境，哈哈，开个玩笑啦）
- 再然后，拿到源代码，复制到你的 html 文本里，保存，再用浏览器打开就可以啦，就是如此简单，那句名人名言是啥来着？对了So easy!
完整源代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3爱心形状加载动画特效</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
#he{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #232e6d;
}
ul{
height: 200px;
}
li{
float: left;
width: 20px;
height: 20px;
border-radius: 20px;
margin-right: 10px;
background-color: red;
}
li:nth-child(1){
animation: love1 4s infinite;
}
li:nth-child(2){
animation: love2 4s infinite;
animation-delay: 0.15s;
}
li:nth-child(3){
animation: love3 4s infinite;
animation-delay: 0.3s;
}
li:nth-child(4){
animation: love4 4s infinite;
animation-delay: 0.45s;
}
li:nth-child(5){
animation: love5 4s infinite;
animation-delay: 0.6s;
}
li:nth-child(6){
animation: love4 4s infinite;
animation-delay: 0.75s;
}
li:nth-child(7){
animation: love3 4s infinite;
animation-delay: 0.9s;
}
li:nth-child(8){
animation: love2 4s infinite;
animation-delay: 1.05s;
}
li:nth-child(9){
animation: love1 4s infinite;
animation-delay: 1.2s;
}
@keyframes love1{
30%,50%{height: 60px; transform: translateY(-30px);}
75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love2{
30%,50%{height: 125px; transform: translateY(-62.5px);}
75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love3{
30%,50%{height: 160px; transform: translateY(-75px);}
75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love4{
30%,50%{height: 180px; transform: translateY(-60px);}
75%,100%{height: 20px; transform: translateY(0);}
}
@keyframes love5{
30%,50%{height: 190px; transform: translateY(-45px);}
75%,100%{height: 20px; transform: translateY(0);}
}
</style>
</head>
<body>
<div id="he">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>最后
好啦，代码学习完了，也快要五一节假日啦，给大家提个醒，去哪个景点都注定是东西又贵，又人山人海，所以我一般的选择是周末加请假，这样避开高峰，好出行，能省钱。而五一这样的节假日，当然是应该回家看看许久不见的亲人们啦。
千言万语一句话，工作的时候好好工作，放假了就好好玩好好休息，劳逸结合嘛。
