本文將為大家詳細(xì)介紹“css如何做個(gè)紅色的心”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“css如何做個(gè)紅色的心”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。
css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。
css做紅色的心的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后定義一個(gè)div，并通過(guò)css屬性畫(huà)出一個(gè)圓形；接著做出一個(gè)正方形；最后通過(guò)css transform中的rotate屬性實(shí)現(xiàn)愛(ài)心樣式即可。
用css做一個(gè)愛(ài)心
摘要：HTML的標(biāo)簽都比較簡(jiǎn)單，入門(mén)非常的迅速，但是CSS是一個(gè)需要我們深度挖掘的東西，里面的很多樣式屬性掌握幾個(gè)常用的便可以實(shí)現(xiàn)很好看的效果，下面我便教大家如何用CSS做一個(gè)愛(ài)心。
明白正方形的畫(huà)法。
明白圓形的畫(huà)法。
明白什么是定位。
明白怎么旋轉(zhuǎn)。
重慶分公司
重慶分公司
.disc1{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:300px 0px 0px 300px;
border-radius:100%;
float:left;
}由于我們的愛(ài)心是由兩個(gè)圓和一個(gè)正方形組成的，所以我們還需要再來(lái)一個(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)基本上出來(lái)了，但是我們還需要調(diào)整一下愛(ài)心的角度，這時(shí)就需要用到我們css樣式中的transform中的rotate屬性了。
我們由于需要把三個(gè)p都旋轉(zhuǎn)角度，所以我們把這三個(gè)p放在一個(gè)p里面。具體代碼如下：
.main{
transform: rotate(45deg);
margin: 300px;
}做到現(xiàn)在，我們的愛(ài)心就已經(jīng)做出來(lái)咯。效果圖如下：
全部代碼如下（包含HTML代碼和CSS代碼）
