[分享]css3实现loading效果

CSS3是一种很强大的标记语言，它可以轻松地实现各种动画效果，其中之一便是loading效果。下面我们就一起来看看如何使用CSS3实现loading效果。.loading { : relative; ...

CSS3是一种很强大的标记语言，它可以轻松地实现各种动画效果，其中之一便是loading效果。下面我们就一起来看看如何使用CSS3实现loading效果。

.loading {
   position: relative;
   display: inline-block;
}
.loading:before {
   content: "";
   box-sizing: border-box;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   border-top: 3px solid #ffffff;
   border-right: 3px solid transparent;
   border-bottom: 3px solid transparent;
   border-left: 3px solid transparent;
   animation: spin 0.8s linear infinite;
}
@keyframes spin {
   to {transform: rotate(360deg);}
} 

上述代码是实现loading效果的关键所在。首先，我们定义一个.loading类，设置其为相对定位，并且使用inline-block让其具有块级元素的特性。接着，在.loading的伪元素:before中定义了一段动画代码。在这段代码中，我们利用border-top来定义loading的颜色和线宽，利用border-right、border-bottom、border-left来实现三角形的形状，利用border-top-right-radius和border-bottom-right-radius来实现圆角效果。最后，在animation属性中使用关键帧动画实现旋转效果。

到此为止，一个简单的loading效果就实现了。我们可以再通过使用transform属性来让loading更加美观，例如可以添加一个scale效果，让loading不断地缩放和放大，或者添加一个opacity效果，使loading在旋转的过程中逐渐变淡。总之，利用CSS3实现loading效果非常的简单，只需要一些基本的CSS技能就能轻松实现。希望你也能动手尝试一下！