前端必看之如何用CSS3畫一個八卦和愛心

昨天雷雨交加，燥熱有所緩解。今晨空氣清新，再加上馬上三天小長假，心情很不錯，祝各位小長假玩的開心。那麼，今天就用CSS3做些“不正緊”的事：畫八卦和愛心。

CSS3我們一般都是用來進行佈局，在工作中很少會刻意去用它畫畫，畢竟這有點耗時間。

一、八卦

css3繪製八卦

分析：它就是多個圓疊加的效果。

1、給body加個背景色，否則看不清八卦的白色部分：

body{background:#efefef;}

2、畫一個圓，漸變是由白到黑的激烈漸變：

.wrap{width: 300px;
 height: 300px;
 background: linear-gradient(to right,#fff 50%,#000 50%);
 border-radius: 50%
}

效果圖如下：

css3繪製八卦

3、在上下各畫一黑一白兩個圓，圓的直徑剛好是剛才大圓的半徑，同時水平居中，然後讓它倆裡面的內容水平和垂直居中（方便畫裡面更小的圓）：

.inner{
 width: 150px;
 height:150px;
 border-radius: 50%;
 margin: auto
}
.white{
 background-color: #fff;
}
.black{
 background-color:#000;
}

 

 

效果圖如下：

css3繪製八卦

4、利用剛才的兩個圓的 after 偽元素，各畫一個更小的圓，背景色和這兩個大圓正好相反，這樣就畫好了，最終代碼如下：

<style><br>body{background:#efefef;}<br>.wrap{<br> width: 300px;<br> height: 300px;<br> background: linear-gradient(to right,#fff 50%,#000 50%);<br> border-radius: 50%;<br>}<br>.inner{<br> width: 150px;<br> height:150px;<br> border-radius: 50%;<br> margin: auto;<br> display: flex;<br> justify-content: center;<br> align-items: center;<br>}<br>.inner:after{<br> content:'';<br> width: 50px;<br> height: 50px;<br> border-radius: 50%<br>}<br>.white{<br> background-color: #fff;<br>}<br>.white:after{<br> background-color: #000;<br>}<br>.black{<br> background-color:#000;<br>}<br>.black:after{<br> background-color:#fff;<br>}<br>/<style>

 

 

最終八卦的效果圖：

二、愛心

分析：愛心其實就是兩個圓+一個旋轉45°的正方形。

1、先定義一個紅色旋轉45°的外框，同時相對定位，方便圓的各個組成部分定位：

<style><br>.heart{<br> position: relative;<br> background: red;<br> width: 300px;<br> height: 300px;<br> transform:rotate(45deg);<br>}<br>/<style>

2、利用heart的before和after偽元素，在它的左右各加一個直徑和它寬度一樣的圓，同時調整兩個圓和heart的邊相切，最終代碼：

<style><br>.heart{<br> position: relative;<br> background: red;<br> width: 300px;<br> height: 300px;<br> transform:rotate(45deg);<br> margin:auto;<br> top:100px;<br>}<br>.heart:before,.heart:after{<br> content: '';<br> position: absolute;<br> top: 0;<br> left: -150px;<br> width: 300px;<br> height: 300px;<br> border-radius: 50%;<br> background: red;<br>}<br>.heart:after{<br> top: -150px;<br> left: 0;<br>}<br>/<style>

最終效果圖：

三、CSS畫圖的好處：

CSS畫圖雖然比直接切成圖片引用要耗時間，但是也有很多好處，例如減少請求次數、顯示速度快，減少網頁大小等，並且畫出來的圖都是矢量的。簡單的圖，用CSS畫還是比較划算的。

當然，不建議複雜的圖用CSS畫，耗時耗力，兼容性還差。

四、結束語：

上面的圖都非常簡單，如果用上陰影（CSS3的陰影非常強大）、漸變，效果會更好，畫面會更加豐滿，立體感更強。嘗試下下面的圖用CSS畫出來：

關注IT學堂，下次我們來畫下上面的LOGO吧。