我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛
前言
时间如白马过隙，不知不觉已迎来夏天，虽然夏天酷热难当，但除了炎热外仿佛什么都很美好，这时，我们可以约三五好友去海边游玩享受海水那丝丝凉意，也可以在家吃着美味的香草冰激凌，抱着半个大西瓜用勺舀着大快朵颐，尤其小时候，暑假也是最长的，长辈们也会扇着蒲扇给我们讲故事，那时总有说不尽的快乐。
介绍
或许我们经常看日本动漫的时候，总会看到夏日祭的字样，其实也是他们庆祝五谷丰登，家庭兴旺的一个节日。但我特别喜欢他们手上的团扇，感觉有些雅致的美感，所以本期将通过纯css去绘制出【和风团扇】，给大家带来一丝清凉之感。通过本期的学习，你可以学习到css自定义变量，伪元素内容写入和图形裁剪等知识点的使用技巧。
演示
正文
配色变量
在网站都会有大量重复的CSS代码，css3中可以使用自定义属性来解决这个问题。兼容性方面，除了IE全体阵亡外，还是比较不错的，很多成名的UI框架和库都在大量使用。
如下，我们定义了五个基础配色值，我们在绘制团扇时都会用这几个色值，来渲染他们的各个部分的颜色，最主要的好处就说，如果一旦色调需要调整，可以迅速改变这些变量来完成，十分的迅速且优雅。
:root{
--skin-color: rgb(219, 65, 67);
--wood-color: rgb(62, 61, 59);
--circle-color: white;
--border-color: rgb(233, 195, 80);
--bg-color:rgb(235, 242, 209);
}
接下来，我们就用 var 方法来使用这些变量，把我们的背景和扇面主色和边线颜色就填充上了。
.main {
width: 100%;
min-height: 100vh;
padding: 0px 0 0px;
text-align: center;
overflow: hidden;
font-size: 14px;
background-color: var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
}
.fan {
position: relative;
transform: translateY(-25%);
width: 360px;
height: 360px;
}
.fan-body {
width:100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
background: var(--skin-color);
position: relative;
border: 3px solid var(--border-color);
box-sizing: border-box;
}
扇面裁切
我们看到的扇面应该是圆形的一部分，下面是木制的骨架，而非一整个大圆盘。可我们如何把它快速的扇面裁切掉一部分呢。这里我们使用了 clip-path 。它是一个非常强大的属性，可以把你的图块裁切成任何形状。其包含了 inset矩形 ， circle 圆形，ellipse椭圆 ，polygon 多边形四种基础裁切图像。甚至可以传入 path ,把svg的path路径拷贝写入进去也可以完美裁切出你想要的形状。
虽然不怎么常用，但是它的兼容情况不是那么糟糕，多数现代浏览器都可以完美支持。
我们这里的目的是让扇面裁切掉底部一部分，所以我们可以用 ellipse 方法，在x轴扩大面积后，再减少y轴的位置。这样就会发现裁切掉一部分的圆了。
.fan-body {
// ...
clip-path: ellipse(250% 100% at 50% -20%);
}
扇面文字
这里的文字，我们为了利用伪元素来实现，众所周知，伪元素利用 content 属性可以写入内容显示出来，但是我们还可以把内容用一个属性写到其父元素上，伪元素同时也是可以读取到其内容属性的。
如下，我们在父元素上随便写了一个属性 data-text ，里面有我们想显示的文字内容。
<div class="fan-body" data-text="祭"></div>
接下来，我们可以在伪元素上利用 attr 方法直接读取出来，这样改起来会更加方便。
.fan-body::after {
content:attr(data-text);
box-sizing: border-box;
width: 100%;
height: 180px;
top: 50%;
transform: translateY(-80%);
font-weight: bolder;
font-size: 180px;
color: var(--wood-color);
position: absolute;
font-family: cursive;
z-index: 99;
text-shadow: var(--border-color) 1px 0 0, var(--circle-color) 0 1px 0,
var(--circle-color) -1px 0 0, var(--circle-color) 0 -1px 0;
display: flex;
align-items: center;
justify-content: center;
}
扇面涂鸦
说起和风，作为动漫迷的我来说，印象最深的图案就是火影里的勾玉写轮眼和鬼灯的冷彻的云纹。接下来，我们就来实现他们吧。
勾玉图案，我们就是由一个圆形和月牙拼接来实现的，圆形不必多少说了，其月牙形则为圆角和 border 边框共同作用，最后通过调节角度和偏移来完成。详见以下代码。
.fan-logo>span{
display: block;
box-sizing: border-box;
width: 28px;
height: 28px;
border-radius: 50%;
position: absolute;
background-color:var(--circle-color);
left: 50%;
top: 50%;
}
.fan-logo>span::before{
content: '';
box-sizing: border-box;
width: 48px;
height: 48px;
border-radius: 50%;
position: absolute;
border-top: 13px solid var(--circle-color);
border-right: 10px solid transparent;
transform: rotate(-149deg);
top: -14px;
right: -20px;
}
云纹图案比较容易，就几个圈套在一起，相互叠加，形成的一种图案，同样我们可以借助两个伪元素画圆来完成，既简单又美观。
.fan-circle {
position: absolute;
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--skin-color);
border: 1px solid var(--circle-color);
}
.fan-circle::before,
.fan-circle::after {
content: "";
width: 80%;
height: 80%;
position: absolute;
left: 50%;
top: 50%;
border: 1px solid var(--circle-color);
transform: translate(-50%, -50%);
border-radius: 50%;
}
扇骨绘制
相信仔细看过上面扇面绘制的同学就能联想到同样使用用 clip-path 来完成下面的残缺的圆形的扇骨。只不过我们这里用到一个小技巧，要通过使用 scale(-1) 来使图像反转，让残缺圆自动放置到底部。详见以下代码：
.fan-bottom {
border: 12px solid var(--wood-color);
width: 356px;
height: 356px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(-1);
clip-path: ellipse(100% 100% at 50% -70%);
background-color: var(--bg-color);
box-sizing: border-box;
}
当然，最后一步，也是最简单的一部就是用矩形调整一些角度来形成扇柄，然后就大功告成啦，当然这部分过于简单这里就不多过多赘述了。
