[分享]css3扇子旋转

CSS3扇子旋转是一种常用于网页设计的特效，可以通过CSS3中的动画属性来实现，为网页增加更多的生动感和视觉效果。/ 完整代码如下 / .fan{ : relative; width: 100px; ...

CSS3扇子旋转是一种常用于网页设计的特效，可以通过CSS3中的动画属性来实现，为网页增加更多的生动感和视觉效果。

/* 完整代码如下 */
.fan{
  position: relative;
  width: 100px;
  height: 100px;
}
.fan div{
  position: absolute;
  width: 0;
  height: 0;
}
.fan div:nth-child(1){
  top: 0;
  left: 0;
  border-top: 50px solid #f00;
  border-right: 50px solid transparent;
  border-left: 0 solid transparent;
  border-bottom: 50px solid #f00;
  transform: rotate(0deg);
  animation: fan1 2s linear infinite;
}
.fan div:nth-child(2){
  top: 0;
  right: 0;
  border-top: 50px solid #0f0;
  border-right: 0 solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid #0f0;
  transform: rotate(0deg);
  animation: fan2 2s linear infinite;
}
.fan div:nth-child(3){
  bottom: 0;
  left: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid #00f;
  border-left: 0 solid transparent;
  border-bottom: 50px solid #00f;
  transform: rotate(0deg);
  animation: fan3 2s linear infinite;
}
.fan div:nth-child(4){
  bottom: 0;
  right: 0;
  border-top: 0 solid transparent;
  border-right: 50px solid #ff0;
  border-left: 50px solid transparent;
  border-bottom: 50px solid #ff0;
  transform: rotate(0deg);
  animation: fan4 2s linear infinite;
}
@keyframes fan1{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}
@keyframes fan2{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(-360deg);}
}
@keyframes fan3{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}
@keyframes fan4{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(-360deg);}
} 

其中，HTML结构为：

<div class="fan">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div> 

样式分别设置了四个扇形的位置、颜色和旋转方式，通过CSS3中的“@keyframes”属性来定义旋转每个元素的开始和结束角度，最后通过“infinite”参数来让旋转动画永不停止。

这个扇子旋转特效可以用于产品展示、页面加载等场景，带来更好的用户体验。以上就是关于CSS3扇子旋转的介绍和实现方法。