持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

夏日炎炎，来把扇子怎么样？当然一把怎能能够呢，要来就来两把，而且是比较特殊的扇子。

双扇

球拍、双扇那要看你怎么看，我看着是扇子呦，原理和前几篇文章差不多的。

结构

因为是双扇，所以最里面是两个元素，如果是一面扇子，那就只需要一个元素就好了。

<div class="camera">
    <div class="container">
        <div style="--i:0"></div>
        <div style="--i:1"></div>
    </div>
</div>

样式

camera和container样式可以参考文章：（二十六）巧用CSS3之旋转木马和（二十八）巧用CSS3之床前夜灯或者在下面查看代码详情。

接下来，我们从扇面的样式讲起。扇面的颜色是利用filter、shadow属性来实现的，扇面的形状是使用border-radius进行变换的，扇面的位置是通过旋转和位移来定位的。具体代码如下：

.container div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: radial-gradient(transparent, cyan);
    transform: rotateY(calc(var(--i) * 180deg)) rotateZ(135deg) translateZ(calc(var(--size) * 0.5));
    filter: hue-rotate(calc(var(--i) * 90deg));
    box-shadow: 0 0 0.5rem cyan,
        0 0 1rem cyan;
    border-radius:0  50%;
}

最后，我们需要给扇子一个扇柄。扇柄是利用扇面元素的伪元素完成的，这样可以把扇面、扇柄完整的粘合在一起形成扇子，具体代码如下：

.container div::before {
    content: '';
    width: calc(var(--size) * 0.05);
    height: calc(var(--size) * 1.5);
    position: absolute;
    left: calc(var(--size) * 0.95);
    top: calc(var(--size) * 1);
    background: gold;
    transform-origin: left top;
    transform: rotate(-45deg);
    border-radius: calc(var(--size) * 0.05);
}

效果

效果及其代码详情，如下：

总结

大家如果感觉这个扇子比较大，可以直接改变--size的大小，扇子（包含扇面和扇柄）会随着--size的变小而变小，是一个线性的关系。