[分享]css3围绕中心旋转动画

CSS3的强大功能包括旋转动画，可以让页面看起来更生动，更具吸引力。现在，让我们来学习如何创建一个围绕中心旋转的动画。首先，在CSS中创建一个名称为“rotate”的动画，设置旋转角度为360度。代码...

CSS3的强大功能包括旋转动画，可以让页面看起来更生动，更具吸引力。现在，让我们来学习如何创建一个围绕中心旋转的动画。

首先，在CSS中创建一个名称为“rotate”的动画，设置旋转角度为360度。代码如下：

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

接下来，我们创建一个带有CSS类名“box”的HTML元素，用于展示旋转动画效果。代码如下：

<div class="box"></div> 

然后，为元素添加CSS样式，包括高度、宽度、背景颜色和动画的名称及时长属性。代码如下：

.box {
  height: 100px;
  width: 100px;
  background-color: #00ff00;
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
} 

最后，我们使用“transform-origin”属性将旋转中心点设置为元素中心。这将使旋转过程更加自然，并且让元素始终处于页面中央。代码如下：

.box {
  height: 100px;
  width: 100px;
  background-color: #00ff00;
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform-origin: center center;
} 

这样，我们就成功地创建了一个围绕中心旋转的动画效果！