溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么使用CSS畫

發(fā)布時間：2021-03-18 11:10:58 來源：億速云 閱讀：152 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)怎么使用CSS畫的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

今天小穎給大家分享一個用CSS畫的愛心，底下有代碼和制作過程，希望對大家有所幫助。

第一步：

先畫一個正方形。如圖：

怎么使用CSS畫

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css畫桃心</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，在正方形的左邊和上邊各畫一個正方形，然后再利用border-radius: 50%;屬性，修飾下這兩個正方形，然后就得到了兩個圓,如圖所示：

怎么使用CSS畫

怎么使用CSS畫

.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%;
            /**兼容蘋果；谷歌，等一些瀏覽器認*/
            -moz-border-radius: 50%;
            /**兼容火狐瀏覽器*/
            -o-border-radius: 50%;
            /**兼容opera瀏覽器*/
            border-radius: 50%;
            background-color: #ffc0cb;
        }

第三步：

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

怎么使用CSS畫

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

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

怎么使用CSS畫

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

感謝各位的閱讀！關(guān)于“怎么使用CSS畫”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手