css3加载动画代码

CSS3是一项非常有趣的技术，前端开发者可以使用CSS3来创建各种各样的特效和动画。其中，CSS3加载动画尤其受欢迎。下面我们来看看如何使用CSS3加载动画。

html：
<div class="loading"></div>
 
CSS：
.loading {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #333;
  border-top-color: #eee;
  animation: loading 1s linear infinite;
}
 
@keyframes loading {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

上面的代码使用CSS3的animation属性和@keyframes规则来创建一个旋转的loading效果。其中，animation属性包含四个值：动画名称（loading）、动画持续时间（1秒）、动画播放方式（线性）和动画播放次数（无限次）。@keyframes规则定义了loading动画的两个关键帧：不旋转和旋转360度。

还有一些其他的CSS3加载动画效果，有兴趣的读者可以在网上搜索相关的代码或者自己动手尝试创造出属于自己风格的加载动画效果。