[分享]css3动画风车

CSS3动画可以轻松实现各种有趣的效果，其中之一就是风车效果。下面我们来看一下如何实现。

 .fan {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border-top: 10px solid #f00;
    border-right: 10px solid #00f;
    border-bottom: 10px solid #0f0;
    border-left: 10px solid #ff0;
    animation: fan 2s infinite linear;
  }
  
  @keyframes fan {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  } 

首先，我们需要创建一个正方形，也就是风车的轮廓。为了实现不同颜色交错的效果，我们设置了四个边框，分别使用不同颜色。同时，我们还为这个元素设置了宽和高，并将其圆角设置为50%。

接着，我们使用关键帧动画来实现旋转效果。我们将起始和结束状态分别设为0度和360度，这样就能让元素一直顺时针旋转。

最后，我们将动画应用于元素上，使用infinite参数表示动画会一直持续执行。而linear参数则表示动画会以匀速进行，避免出现突兀的变化。

通过以上的代码，我们成功创建了一个可以旋转的风车效果。CSS3动画可以轻松实现各种有趣的效果，其中之一就是风车效果。下面我们来看一下如何实现。

 .fan {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border-top: 10px solid #f00;
    border-right: 10px solid #00f;
    border-bottom: 10px solid #0f0;
    border-left: 10px solid #ff0;
    animation: fan 2s infinite linear;
  }
  
  @keyframes fan {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  } 

首先，我们需要创建一个正方形，也就是风车的轮廓。为了实现不同颜色交错的效果，我们设置了四个边框，分别使用不同颜色。同时，我们还为这个元素设置了宽和高，并将其圆角设置为50%。

接着，我们使用关键帧动画来实现旋转效果。我们将起始和结束状态分别设为0度和360度，这样就能让元素一直顺时针旋转。

最后，我们将动画应用于元素上，使用infinite参数表示动画会一直持续执行。而linear参数则表示动画会以匀速进行，避免出现突兀的变化。

通过以上的代码，我们成功创建了一个可以旋转的风车效果。