[分享]css3控制div360度旋转

CSS3是目前前端开发的主流技术之一，它可以用来美化网站、制作动画等，本篇文章将介绍如何使用CSS3控制div 360度旋转。div { /设定一个CSS3动画/ animation: rotate ...

CSS3是目前前端开发的主流技术之一，它可以用来美化网站、制作动画等，本篇文章将介绍如何使用CSS3控制div 360度旋转。

div {
  /*设定一个CSS3动画*/
  animation: rotate 2s linear infinite;
}

/*定义CSS3动画*/
@keyframes rotate {
  0% {
    /*设定初始状态*/
    transform: rotate(0deg);
  }
  100% {
    /*设定结束状态*/
    transform: rotate(360deg);
  }
} 

以上代码中，我们为div元素设置了一个CSS3动画，名为“rotate”，它以2秒的时长、线性方式、无限次数循环旋转。

接下来，我们要定义CSS3动画“rotate”的初始状态和结束状态。在初始状态下，div元素旋转的度数为0度；在结束状态下，div元素旋转的度数为360度，即一圈。

通过这样的代码，我们便可以很容易地控制div元素360度旋转了。你可以在你的网页中加入这段代码，让你的网站更具动感和吸引力。