想起之前朋友給我發(fā)的一個圖片
fengche.png
其實是chrome插件infinity首頁右下角的風(fēng)車
請允許我安利一波這插件
忽發(fā)奇想能不能用純CSS做一個出來.. 仔細(xì)看了看這風(fēng)車肺然，好像構(gòu)造也不算太復(fù)雜，于是昨晚就動手了
先看看最終效果
傳送門(github)
其實源碼大家都可以用F12看到了（代碼很爛- -大嬸勿噴）..
下面我就來分析一下制作過程（過程僅供大家參考..因為太爛了..不建議模仿..有更好的代碼歡迎交流..）
首先先做出風(fēng)車的其中一個扇葉
QQ截圖20170102195947.jpg
原理其實也很簡單，深色部分其實是一個完整的矩形于宙，然后用border-radius把右上角做成圓角的。至于那個有圓角的三角形，其實是用邊框做的，當(dāng)然膘盖，還是要用border-radius把角做成有弧度的。
有興趣的朋友可以看看這里詳解css畫一個三角形
事不宜遲尤误。talk is cheap , show you my code
*{
margin: 0;
padding: 0;
}
.tri{
width: 0;
height: 0;
border-width: 142px;
border-style: solid;
border-top-left-radius: 109px 122px;
position: absolute;
transform: rotate(45deg);
top: 28px;
left: 56px;
border-color: #1ABC9C transparent transparent #1ABC9C;
}
.squ{
position: absolute;
width: 271px;
height: 170px;
border-top-right-radius: 98px 68px;
background-color: #16A085;
}
把剩下的三個扇葉做出來
OK侠畔，既然一個扇葉做出來了，其他的也就不成問題了损晤，也就是改一改顏色软棺，每個扇葉用一個div包起來，然后再加上各種位移尤勋，將四個扇葉分別放好
當(dāng)然咯喘落，少不了我們中間的小圓點（完整代碼放最后）
最后用一個大的div把整個風(fēng)車包起來，加上旋轉(zhuǎn)的效果最冰，就大功告成了瘦棋！
11111111.gif
（今天剛學(xué)了選擇器，為了沒有太多的冗余代碼暖哨，css較上面的會稍稍進行處理）
超級無敵完整代碼：
CSS部分：
*{
margin: 0;
padding: 0;
}
.main{
width: 804px;
height: 804px;
animation: roll 1000ms linear infinite;
}
@keyframes roll{
0%{transform: rotate(0deg);}
100%{transform: rotate(-360deg);}
}
.white_circle{
z-index: 99;
position: absolute;
width: 50px;
height: 50px;
border-radius: 50px;
background-color: white;
margin: 377px 0 0 377px;
}
.fla{
position: absolute;
width: 402px;
height: 180px;
}
.fla_one{
transform: rotate(270deg);
margin:108px 0px 0px 121px;
}
.fla_two{
transform: rotate(180deg);
margin-top: 389px;
}
.fla_three{
transform: rotate(90deg);
margin: 511px 0 0 280px;
}
.fla_four{
transform: rotate(360deg);
margin: 230px 0 0 402px;
}
.tri{
width: 0;
height: 0;
border-width: 142px;
border-style: solid;
border-top-left-radius: 109px 122px;
position: absolute;
transform: rotate(45deg);
top: 28px;
left: 56px;
}
.tri_one {
border-color: #F1C40F transparent transparent #F1C40F;
}
.tri_two {
border-color: #EA4C3C transparent transparent #EA4C3C;
}
.tri_three {
border-color: #2ECC71 transparent transparent #2ECC71;
}
.tri_four {
border-color: #1ABC9C transparent transparent #1ABC9C;
}
.squ{
position: absolute;
width: 271px;
height: 170px;
border-top-right-radius: 98px 68px;
}
.squ_one{
background-color: #F39C12;
}
.squ_two{
background-color: #C0392B;
}
.squ_three{
background-color: #27AE60;
}
.squ_four{
background-color: #16A085;
}
HTML部分：
<div class="main">
<div class="white_circle"></div>
<div class="fla fla_one">
<div class="squ squ_one"></div>
<div class="tri tri_one"></div>
</div>
<div class="fla fla_two">
<div class="squ squ_two"></div>
<div class="tri tri_two"></div>
</div>
<div class="fla fla_three">
<div class="squ squ_three"></div>
<div class="tri tri_three"></div>
</div>
<div class="fla fla_four">
<div class="squ squ_four"></div>
<div class="tri tri_four"></div>
</div>
</div>
