[分享]css3扇子怎么写

CSS3扇子是一种非常漂亮的效果，可以用来装饰网页，提升视觉效果，下面我们来看看如何实现这个效果。

 .fan {
        position: relative;
        width: 0;
        height: 0;
        border-right: 200px solid transparent;
        border-bottom: 200px solid #f00;
        border-left: 200px solid #f00;
        border-top: 200px solid transparent;
        border-radius: 50%;
        transform: rotate(-45deg);
        animation: fan 3s infinite linear;
    }

    @keyframes fan {
        from {
            transform: rotate(-45deg);
        }
        to {
            transform: rotate(315deg);
        }
    } 

首先，我们在CSS中创建一个名为“fan”的类，设置其为相对定位，然后定义一个圆形的边框，并设置其边框颜色为红色。接着，通过设置圆形边框的border-radius属性，将其变成一个扇形。最后，使用transform属性对扇形进行旋转动画。

如果想要扇形的颜色不是红色，可以修改border-bottom属性中的颜色值，从而得到不同颜色的扇形效果。

除了上述方法，我们还可以通过box-shadow属性来实现扇形的效果。这种方法不需要设置边框，只需要设置box-shadow属性的颜色和位置即可。示例代码如下：

 .fan {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #f00;
        transform: rotate(-45deg);
        box-shadow: 0 0 0 10000px #fff, 0 200px 0 #f00;
        animation: fan 3s infinite linear;
    }

    @keyframes fan {
        from {
            transform: rotate(-45deg);
        }
        to {
            transform: rotate(315deg);
        }
    } 

以上两种方法都可以实现扇形效果，根据实际情况选择使用哪种方法，或者结合两种方法也是可以的。