[分享]css3悬浮物循环动画

CSS3悬浮物循环动画能很好地增强网页的用户体验和活力，因此在现代Web设计中广泛应用。以下是一个简单的例子，代码使用pre标签输入：/ 设置鼠标悬浮物 / .hoverobject { width:...

CSS3悬浮物循环动画能很好地增强网页的用户体验和活力，因此在现代Web设计中广泛应用。以下是一个简单的例子，代码使用pre标签输入：

/* 设置鼠标悬浮物 */
.hover-object {
  width: 50px;
  height: 50px;
  background-color: #f00;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: hover 2s ease-in-out infinite;
}

/* 设置动画 */
@keyframes hover {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(270deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
} 

该例子实现了一个红色球体动画，当鼠标悬浮于其上时，球体会在绕自身中心旋转的同时运动。具体实现方法如下：

首先，定义一个.hover-object类用于表示悬浮物，设置其宽高为50px，背景颜色为红色，圆角半径为50%，使用绝对位置将其水平居中并垂直居中到页面的中央。

接下来，使用transform属性将球体向左侧移动50%宽度的距离，使其居中对齐，同时沿顺时针方向旋转0度。这是动画的初始状态。

然后，定义一个名为hover的动画，它有5个关键帧（0%、25%、50%、75%、100%），实现球体绕自身中心旋转和运动的效果。在关键帧中，每个状态都使用transform属性来设置球体的位置和方向。在最后一个关键帧中，将旋转角度恢复到0度，使其回到初始状态，并且将animation属性设置为无限循环。

以上就是CSS3悬浮物循环动画的一个简单例子，使用CSS3动画可以实现很多有趣的效果。使用它能带给用户更加生动、有趣、动感的成就感。这样不但可以使得用户体验更佳，而且也可以达到更好的视觉效果。