站長(zhǎng)資訊網(wǎng)css做紅色的心的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后定義一個(gè)div，并通過css屬性畫出一個(gè)圓形；接著做出一個(gè)正方形；最后通過css transform中的rotate屬性實(shí)現(xiàn)愛心樣式即可。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。
用css做一個(gè)愛心
摘要：HTML的標(biāo)簽都比較簡(jiǎn)單，入門非常的迅速，但是CSS是一個(gè)需要我們深度挖掘的東西，里面的很多樣式屬性掌握幾個(gè)常用的便可以實(shí)現(xiàn)很好看的效果，下面我便教大家如何用CSS做一個(gè)愛心。
前期預(yù)備知識(shí)：
- 明白正方形的畫法。
- 明白圓形的畫法。
- 明白什么是定位。
- 明白怎么旋轉(zhuǎn)。
話不多說，先教大家怎么用css畫一個(gè)圓形。
.disc1{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:300px 0px 0px 300px; border-radius:100%; float:left; }
由于我們的愛心是由兩個(gè)圓和一個(gè)正方形組成的，所以我們還需要再來一個(gè)圓形。
.disc2{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:250px 0px 0px 0px; border-radius:100%; float:left; position: relative; right: 50px; }
【推薦：《css視頻教程》】
第三步我們就需要做一個(gè)正方形了。
.square{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin: 300px 0px 0px 0px; float: left; position: relative; right: 152px; }
做完這些的效果已經(jīng)基本上出來了，但是我們還需要調(diào)整一下愛心的角度，這時(shí)就需要用到我們css樣式中的transform中的rotate屬性了。
我們由于需要把三個(gè)p都旋轉(zhuǎn)角度，所以我們把這三個(gè)p放在一個(gè)p里面。具體代碼如下：
.main{ transform: rotate(45deg); margin: 300px; }
做到現(xiàn)在，我們的愛心就已經(jīng)做出來咯。效果圖如下：
全部代碼如下（包含HTML代碼和CSS代碼）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link href="css/square.css" rel="stylesheet" type="text/css"> <title></title> </head> <body> <div class="main"> <div class="disc1"></div> <div class="disc2"></div> <div class="square"></div> </div> </body> </html>
*{ margin: 0px; padding: 0px; } .main{ transform: rotate(45deg); margin: 300px; } .disc1{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:300px 0px 0px 300px; border-radius:100%; float:left; } .disc2{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin:250px 0px 0px 0px; border-radius:100%; float:left; position: relative; right: 50px; } .square{ width: 100px; height: 100px; border:1px solid red; background-color: red; margin: 300px 0px 0px 0px; float: left; position: relative; right: 152px; }
