欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS畫(huà)愛(ài)心的過(guò)程詳解

  發(fā)布時(shí)間：2017-01-05 09:59:04   作者：佚名   我要評(píng)論
本文給大家分享使用css制作愛(ài)心的過(guò)程詳解，本文分步驟給大家介紹的非常詳細(xì)，需要的的朋友參考下

今天小穎給大家分享一個(gè)用CSS畫(huà)的愛(ài)心，底下有代碼和制作過(guò)程，希望對(duì)大家有所幫助。

第一步：

先畫(huà)一個(gè)正方形。如圖：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css畫(huà)桃心</title>
    <style media="screen">
        .heart-body {
            width: 500px;
            margin: 100px auto;
            position: relative;
        }
        .heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
        }
    </style>
</head>
<body>
    <div class="heart-body">
        <div class="heart-shape"></div>
    </div>
</body>
</html>

第二步：

將利用偽元素before和 :after，在正方形的左邊和上邊各畫(huà)一個(gè)正方形，然后再利用border-radius: 50%;屬性，修飾下這兩個(gè)正方形，然后就得到了兩個(gè)圓,如圖所示：

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            background-color: #ffc0cb;
        }
        .heart-shape:before {
            left: -45px;
        }
        .heart-shape:after {
            top: -45px;
        }

利用border-radius: 50%; 屬性：

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /**兼容蘋果；谷歌，等一些瀏覽器認(rèn)*/
            -moz-border-radius: 50%;
            /**兼容火狐瀏覽器*/
            -o-border-radius: 50%;
            /**兼容opera瀏覽器*/
            border-radius: 50%;
            background-color: #ffc0cb;
        }

第三步：

類名為：heart-shape的div 利用transform: rotate(45deg); 屬性將他們旋轉(zhuǎn)45度，如圖所示：

.heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
            -webkit-transform: rotate(45deg);
            /* Safari 和 Chrome */
            -moz-transform: rotate(45deg);
            /* Firefox */
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -o-transform: rotate(45deg);
            /* Opera */
            transform: rotate(45deg);
        }

小穎把圓的背景色和正方形的背景色沒(méi)給統(tǒng)一的顏色，是為了大家更好的看到明顯的效果圖，接下來(lái)小穎將其背景色設(shè)置成統(tǒng)一的，最終的愛(ài)心就出來(lái)了，如圖所示：

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /**兼容蘋果；谷歌，等一些瀏覽器認(rèn)*/
            -moz-border-radius: 50%;
            /**兼容火狐瀏覽器*/
            -o-border-radius: 50%;
            /**兼容opera瀏覽器*/
            border-radius: 50%;
            background-color: #f70e0e;
        }

以上所述是小編給大家介紹的使用CSS畫(huà)愛(ài)心的過(guò)程詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論