　　曾经以为，loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让它旋转就完了。gif图也可以，但是加载时间比较长。

　　CSS的animation可以做出大多数的loading，比如：

loading1：

1、HTML：

 <div id="ddr">

     <div class="ddr ddr1"></div>

     <div class="ddr ddr2"></div>

     <div class="ddr ddr3"></div>

     <div class="ddr ddr4"></div>

     <div class="ddr ddr5"></div>

 </div>

2、CSS：

 #ddr{

     margin: 0 auto;

     width: 70px;

     height: 120px;

 }

 .ddr{

     width: 10px;

     height: 120px;

     float: left;

     margin: 2px;

     background-color: #00ff00;

     animation: loading 1s infinite ease-in-out;/*animation：动画名称 持续时间 动画速度曲线 延迟 执行多少次 是否正反方向轮流播放*/

 }

 .ddr2{

     animation-delay: -0.9s;/*定义开始执行的地方，负号表示直接从第900ms开始执行*/

 }

 .ddr3{

     animation-delay: -0.8s;

 }

 .ddr4{

     animation-delay: -0.7s;

 }

 .ddr5{

     animation-delay: -0.6s;

 }

 @keyframes loading {

     0%,40%,100%{ /*定义每帧的动作*/

         -webkit-transform: scaleY(0.5);

     }

     20%{

         -webkit-transform: scaleY(1);

     }

 }

loading2：

1、HTML：

 <div id="circle"></div>

2、CSS：

 #circle{

     margin: 20px auto;

     width: 100px;

     height: 100px;

     border: 5px white solid;

     border-left-color: #ff5500;

     border-right-color:#0c80fe;

     border-radius: 100%;

     animation: loading1 1s infinite linear;

 }

 @keyframes loading1{

     from{transform: rotate(0deg)}to{transform: rotate(360deg)}

 }

loading3：

1、HTML：

 <div id="loader3">

     <div id="loader3-inner"></div>

 </div>

2、CSS：

 #loader3{

     box-sizing: border-box;

     position: relative;

     margin-left: 48%;

     transform: rotate(180deg);

     width: 50px;

     height: 50px;

     border: 10px groove rgb(170, 18, 201);

     border-radius: 50%;

     animation: loader-3 1s ease-out alternate infinite;/* alternate表示则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）反向播放 */

 }

 #loader3-inner{

     box-sizing: border-box;

     width: 100%;

     height: 100%;

     border: 0 inset rgb(170, 18, 201);

     border-radius: 50%;

     animation: border-zoom 1s ease-out alternate infinite;

 }

 @keyframes loader-3 {

     0%{

         transform: rotate(0deg);

     }

     100%{

         transform: rotate(-360deg);

     }

 }

 @keyframes border-zoom {

     0%{

         border-width: 0px;

     }

     100%{

         border-width: 10px;

     }

 }

loading4：

1、HTML：

 <div id="loading4">

     <div id="loader4" class="heart"></div>

 </div>

2、CSS：

 #loading4{

     width: 100%;

     height: 100px;

 }

 #loader4{

     position: relative;

     margin-left: calc(50% - 25px);

     width: 50px;

     height: 50px;

     animation: loader-4 1s ease-in-out alternate infinite;

 }

 .heart:before{

     position: absolute;

     left: 11px;

     content: "";

     width: 50px;

     height: 80px;

     transform: rotate(45deg);

     background-color: rgb(230, 6, 6);

     border-radius: 50px 50px 0 0;

 }

 .heart:after{

     position: absolute;

     right: 11px;

     content: "";

     width: 50px;

     height: 80px;

     background-color: rgb(230, 6, 6);

     transform: rotate(-45deg);

     border-radius: 50px 50px 0 0;

 }

 @keyframes loader-4 {

     0%{

         transform: scale(0.2);

         opacity: 0.5;

     }

     100%{

         transform: scale(1);

         opacity:;

     }

 }

环形进度条：

0、原理：

(1)、

如图，先画一个正方形，这个正方形就是环形loading的轨道（现在还不是），再将一个圆放在上面，充当遮蔽物。

(2)、

CSS3有个clip属性，可以裁剪图像，将上面的圆裁为一半，假如这个圆的右半部分一直看不见，旋转左边这个半圆，会出现怎样的效果呢？

(3)、

如图，就是这种效果，这时候再加一个遮罩，就形成了下面这种效果：

(4)、

再将最下面的正方形变成圆形（变成真正的轨道），旋转橙色部分的圆环，底部青色的就会露出来，就形成了进度条的效果

(5)、

这是左边的一半，将右边的一半补齐：

(6)、

中间白色部分是mask，加上相应的文字，调整颜色就ok啦！

(7)、

1、HTML:

 <!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>

   <link rel="stylesheet" href="progress.css">

 </head>

 <body>

   <div class="circle">

     <div class="preLeft">

       <div class="left"></div>

     </div>

     <div class="preRight">

       <div class="right"></div>

     </div>

   </div>

   <div class="mask">

     <span class="progress">0</span>%

   </div>

   <script src="progress.js"></script>

 </body>

 </html>

2、CSS:

 *{

   margin:;

   padding:;

 }

 .circle {

   width: 200px;

   height: 200px;

   border-radius: 50%;

   box-shadow: 0 0 7px 0px inset;

   background:linear-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);

   filter: blur(8px);

   transform: scale(1.1);

   -webkit-mask: radial-gradient(black 30px, #0000 90px);

 }

 .preLeft{

   position: absolute;

   top:;

   left:;

   width: 200px;

   height: 200px;

   clip: rect(0, 100px, auto, 0);

 }

 .left{

   position: absolute;

   top:;

   left:;

   width: 200px;

   height: 200px;

   border-radius: 50%;

   box-shadow: 0 0 3px 0px inset;

   background: #fff;

   transform: rotate(0deg);

   clip: rect(0, 100px, auto, 0);

 }

 .preRight{

   position: absolute;

   top:;

   left:;

   width: 200px;

   height: 200px;

   clip: rect(0, auto, auto, 100px);

 }

 .right {

   position: absolute;

   top:;

   left:;

   width: 200px;

   height: 200px;

   border-radius: 50%;

   box-shadow: 0 0 3px 0px inset;

   background:#fff;

   transform: rotate(0deg);

   clip: rect(0, auto, auto, 100px);

 }

 .mask {

   width: 150px;

   height: 150px;

   position: absolute;

   left: 25px;

   top: 25px;

   border-radius: 50%;

   /* box-shadow: 0 0 5px 0px; */

   background: #FFF;

   text-align: center;

   line-height: 150px;

 }

3、JS:

 function init() {

   let left = document.getElementsByClassName('left')[0];

   let right = document.getElementsByClassName('right')[0];

   let progress = document.getElementsByClassName('progress')[0];

   let value = 0;

   let timer = setInterval(() => {

     if (progress.innerHTML < 100) {

       progress.innerHTML = value++;

       if (value <= 50) {

         right.style.transform = 'rotate(' + (value * 3.6) + 'deg)';

       } else if (value <= 100) {

         left.style.transform = 'rotate(' + ((value - 50) * 3.6) + 'deg)';

       }

     } else {

       clearInterval(timer);

     }

   }, 100);

 }

 window.onload = function () {

   init();

 };

逢年过节，百度或者谷歌都会在首页播放一段动画，比如元宵节：

这个动画不仅仅是gif图，有时候是一张长长的包含所有帧的图片：

仿照animation一帧一桢的思路，可以将这张图片做成动画：

 #picHolder{

 /* 图片样式 */

     position: absolute;

     top: 17%;

     left: 50%;

     width: 270px;

     height: 129px;

     margin-left:-135px;

     background-image: url("../../../Library_image/tangyuan.png");

     background-repeat: no-repeat;

     background-position-x:;

     cursor: pointer;

 }

 function animation () {

 /* 定时移动图片，使观众看到不同的帧 */

   var po = 0

   var i = 0

   var holder = document.getElementById('picHolder')

   setInterval(function () {

     po += -270

     i++

     holder.style.backgroundPositionX = po + 'px'

     if (i >= 31) {

       i = 0

       po = 270

     }

   }, 100)

 }

 window.onload = function () {

   animation()

 }

不过有时候他们又会放上一张gif图，不懂他们的套路

巴特西

CSS制作简单loading动画

loading1：

loading2：

loading3：

loading4：

环形进度条：

最新文章

热门文章