首頁 > 文章 > web前端 > css怎麼做個紅色的心

css怎麼做個紅色的心

藏色散人原創: 2021-02-28 15:17:062215瀏覽

css做紅色的心的方法：先建立一個HTML範例檔；然後定義一個div，並透過css屬性畫出一個圓形；接著做出一個正方形；最後透過css transform中的rotate屬性實現愛心樣式即可。

css怎麼做個紅色的心

本教學操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

用css做一個愛心

摘要：HTML的標籤都比較簡單，入門非常的迅速，但是CSS是一個需要我們深度挖掘的東西，裡面的許多樣式屬性掌握幾個常用的便可以實現很好看的效果，下面我便教大家如何用CSS做一個愛心。

　　前期預備知識：

#　　明白正方的畫法。
明白圓形的畫法。
明白什麼是定位。
明白怎麼旋轉。

　　話不多說，先教大家怎麼用css畫圓形。

.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;
}

【推薦：《css影片教學》】　　

第三步我們就需要做一個正方形了。

.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

　　做完這些的效果已經基本上出來了，但是我們還需要調整一下愛心的角度，這時就需要用到我們css樣式中的transform中的rotate屬性了。

　　我們由於需要把三個p都旋轉角度，所以我們把這三個p放在一個p裡面。具體程式碼如下：

.main{
    transform: rotate(45deg);
    margin: 300px;
}

　　做到現在，我們的愛心就已經做出來咯。效果圖如下：

　　全部程式碼如下（包含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;
}

以上是css怎麼做個紅色的心的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 html transform

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎麼寫一個直角三角形下一篇：css怎麼寫一個直角三角形

看更多