[分享]css3折扇效果

折扇效果是 CSS3 动画中比较流行的效果之一，它能够使一个元素像扇子一样展开和收拢。实现折扇效果需要使用 CSS3 的 transform 属性以及过渡动画，下面是一个基本的折扇效果代码：.scis...

折扇效果是 CSS3 动画中比较流行的效果之一，它能够使一个元素像扇子一样展开和收拢。

实现折扇效果需要使用 CSS3 的 transform 属性以及过渡动画，下面是一个基本的折扇效果代码：

.scissor {
  width: 100px;
  height: 100px;
  background-color: #f00;
  position: relative;
}

.scissor.open {
  transform: rotateZ(-45deg);
  transition: transform 1s ease-in-out;
}

.scissor .blade {
  width: 100%;
  height: 50%;
  background-color: #fff;
  position: absolute;
}

.scissor .blade.top {
  top: 0;
}

.scissor .blade.bottom {
  bottom: 0;
  transform: rotate(180deg);
} 

代码中的.scissor 定义了折扇的基本样式，包括宽度、高度、背景色和相对定位。同时，我们还为其定义了两个 .blade 类，分别代表在折扇上下方的两个三角形。

接着，我们定义了一个 .open 类，当添加了该类名时，折扇就会展开。该类名定义了 transform 属性，使折扇绕 Z 轴旋转 -45 度，并且指定了过渡动画。

在 HTML 中，你可以使用 SCSS/LESS 等工具来生成折扇的样式，也可以通过添加 .open 类名来实现折扇的展开和收拢效果。使用折扇效果可以让你的页面更加生动，增加用户体验。