[分享]css3圆动画效果

CSS3圆动画效果是如何制作的？首先，我们需要了解CSS3中的两个重要概念——transition（过渡）和transform（变形）。

.circle{
  width: 100px;
  height: 100px;
  background-color: #f00;
  border-radius: 50%;
  transition: all 0.3s ease;
}
 
.circle:hover{
  transform: scale(1.2);
} 

以上代码是创建一个圆形div的基础代码。我们使用border-radius将正方形变成圆形，然后用transition为div添加过渡效果。当我们应用:hover伪类时，使用transform: scale（1.2）对div进行缩放。

.circle{
  width: 100px;
  height: 100px;
  background-color: #f00;
  border-radius: 50%;
  position: relative;
  animation: circle 1s infinite linear;
}

@keyframes circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

以上代码是使用animation实现圆形旋转动画。我们使用position:relative将此div相对定位。然后，使用animation属性为此div添加动画。我们定义一个名为“circle”的关键帧动画，设置1秒的动画时间和无限循环。在关键帧规则中，我们将div从0度旋转到360度，并使用transform实现。