纯css制作loading动画

通常loading动画都是使用图片，其实简单的loading动画用css就可以完全做到。

先上代码

html

<div class="loading">
  <div class="left"></div>
  <div class="right"></div>
</div>
复制代码

css

.loading {
  width: 100px;
  height: 100px;
  position: fixed;
  display: flex;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask: radial-gradient(transparent 55%, #000 55%);
  animation: rotate 1s linear infinite;
}
.left {
  width: 50%;
  height: 100%;
  background: linear-gradient(rgb(2, 211, 248), rgba(2, 211, 248, .5))
}
.right {
  width: 50%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(2, 211, 248, .5));
}
@keyframes rotate {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
复制代码

最终效果

这里使用的mask属性浏览器支持较差，只有webkit内核的浏览器和firefox支持，不过移动端是完全没有问题的。

原理也很简单，就是利用css3渐变和mask遮罩,来制作这个效果。

css3渐变可以看这里

mask可以看这里

首先使用线性渐变linear-gradient,左边半块从上到下，透明度1渐变到0.5，右边半块从上到下，透明度0渐变到0.5，大致是下面这个样子

然后在父元素把它切割成圆形，并使用mask遮罩遮盖住中间的位置，使其成为圆环形，也许你认为不用mask而使用一个块元素遮住中间也行，但是块元素是不透明的，同时也遮住了背景，而mask却可以使元素透明。

利用这个原理，我们可以制作更多有趣的loading动画。

稍微改变一下，就会有各种效果

// .left
background: linear-gradient(rgb(255, 255, 255), rgb(0, 0, 0));
// .right
background: linear-gradient(rgb(255, 255, 255), rgb(0, 0, 0));
复制代码

// .left
background: linear-gradient(rgb(255, 0, 0), rgb(0, 255, 0) 33%, rgb(0, 255, 255) 66%, rgb(0, 0, 255) 100%);
// .right
background: linear-gradient(rgb(255, 0, 0), rgb(255, 0, 255) 50%, rgb(0, 0, 255), 100%);
复制代码

更多有趣的效果，需要自己去探索。

转载于:https://juejin.im/post/5abf4125f265da23766b69e1