[分享]css3扇子散开效果

CSS3 扇子散开效果是一种华丽的网页动画效果，可以为网页带来独特的视觉体验。该效果使用 CSS3 的过渡（transition）和动画（animation）属性实现，通过定义不同的角度、透明度、缩放...

CSS3 扇子散开效果是一种华丽的网页动画效果，可以为网页带来独特的视觉体验。该效果使用 CSS3 的过渡（transition）和动画（animation）属性实现，通过定义不同的角度、透明度、缩放比例等属性来模拟扇子散开的效果。

/* 定义扇子容器 */
.fan-container {
  width: 200px;
  height: 200px;
  position: relative;
}

/* 定义扇子 */
.fan {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: top left;
  opacity: 0;
  transition: all 0.5s ease;
}

/* 定义悬浮状态样式 */
.fan:hover {
  opacity: 1;
  transform: scale(1.2, 1.2);
}

/* 定义扇子颜色和角度 */
.fan1 {
  background-color: #ff0000;
  transform: rotate(0deg);
}

.fan2 {
  background-color: #00ff00;
  transform: rotate(15deg);
}

.fan3 {
  background-color: #0000ff;
  transform: rotate(30deg);
}

.fan4 {
  background-color: #ffff00;
  transform: rotate(45deg);
}

.fan5 {
  background-color: #ff00ff;
  transform: rotate(60deg);
}

.fan6 {
  background-color: #00ffff;
  transform: rotate(75deg);
}

.fan7 {
  background-color: #ffa500;
  transform: rotate(90deg);
}

.fan8 {
  background-color: #8b4513;
  transform: rotate(105deg);
} 

运用以上代码，我们就可以轻松实现一个扇子散开的效果。在 HTML 代码中，只需要将扇子容器添加到页面中，并为每个扇子添加不同的类名即可。在 CSS 代码中，我们将扇子容器设置为相对定位（relative），并将每个扇子设置为绝对定位（absolute）。此外，我们还可以定义鼠标悬浮在扇子上时的效果，让扇子变得更加生动。