[分享]css3扇子动画

CSS3扇子动画是一种可以通过CSS3实现的炫酷动画效果，它可以让一个元素在屏幕中旋转并且展开，就像一把扇子一样。下面是一个简单的CSS3扇子动画实现： .fan { width: 100px; he...

CSS3扇子动画是一种可以通过CSS3实现的炫酷动画效果，它可以让一个元素在屏幕中旋转并且展开，就像一把扇子一样。下面是一个简单的CSS3扇子动画实现：

 .fan {
    width: 100px;
    height: 100px;
    transform-origin: top left;
    animation: fan 2s linear infinite;
  }
  
  @keyframes fan {
    0% {
      transform: rotate(0deg) scaleX(1);
    }
    50% {
      transform: rotate(180deg) scaleX(2);
    }
    100% {
      transform: rotate(360deg) scaleX(1);
    }
  } 

代码中，我们首先定义了一个名为“fan”的CSS类，将其宽度和高度都设定为100像素，然后定义了一个叫做“transform-origin”的CSS属性，将其设置为左上角，这个属性会决定旋转的中心点。

接下来我们定义了一个名为“fan”的关键帧动画，它包含了三个样式状态，分别在0%、50%和100%时生效。在0%和100%时，我们都将其设定为绕左上角旋转0度，而在50%时，我们则将其设置成绕左上角旋转180度并按照x轴放大两倍。这样就实现了一个扇形的展开收缩效果。

最后，我们在元素上应用了这个名为“fan”的动画，设定了其持续时间为2秒，使用线性函数进行补间计算，并且将其无限循环。

总而言之，使用CSS3扇子动画可以让你的网页更加生动有趣，同时也能够提高用户对网站的留存率。