[分享]css3手机加载中

CSS3手机加载中是一种很常见的动画效果。它通过CSS3的动画属性和关键帧技术实现一个旋转的图片或者动画向用户展示手机系统正在加载中。接下来我们来演示一下如何实现这个动画效果。.loading { b...

CSS3手机加载中是一种很常见的动画效果。它通过CSS3的动画属性和关键帧技术实现一个旋转的图片或者动画向用户展示手机系统正在加载中。接下来我们来演示一下如何实现这个动画效果。

.loading {
  background-image: url(loading.png);
  width: 50px;
  height: 50px;
  -webkit-animation: spin 1s infinite linear;
  -moz-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
  margin: 20px auto;
  display: block;
}

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

上面的代码就是实现CSS3手机加载中的关键代码。我们通过.loading类设置一个样式，使用了一个自制的图像loading.png作为背景图片，并且给图片设置了宽高。接着我们用-webkit-animation、-moz-animation、animation为图片设置了动画效果。其中spin是动画名称，1s表示动画持续1秒，infinite表示动画无限循环，linear表示动画的运动方式是线性的。最后用margin: 20px auto的方式让加载中的动画在页面中垂直居中显示。

我们不仅可以把图片旋转起来，还可以通过CSS3的transform属性来将图片缩放、偏移、旋转等等。CSS3手机加载中的动画效果在网站和移动应用中都可以广泛使用，它无疑是一种很好的视觉效果，能够提升用户的体验感和用户的等待心理。