css3 做loading

CSS3是一种强大的前端技术，可以让网页更加生动、有趣。其中，CSS3做loading效果是一种常见的应用。下面，我们将介绍如何使用CSS3做loading效果。

.loading {
  border: 4px solid rgba(0,0.2);
  border-top-color: #ffffff;
  border-radius: 50%;
  height: 20px;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
  width: 20px;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

上面的代码是利用CSS3的动画效果来制作loading，首先设置loading的样式，包括边框、高度、宽度等。同时设置loading的初始位置与起始动画，并使用@keyframes关键字定义动画效果。

然后，在HTML中通过一个div元素设置loading的显示区域，并将动画设置于其中。

这样，即可实现一个简单的loading效果。