CSS利用僞類，畫出一個心形

時間 2019-11-09

標籤 css 利用畫出一個心形欄目 CSS 简体版

原文原文鏈接

實現過程當中它的變化，及最終效果以下圖展現

由此軌跡能夠看出是如何製做的

1、初始css

首先是提供一個div設置其寬高及背景色並使用relative進行定位

.heart {
   width: 30px;
   height: 30px;
   background: red;
   position: relative;
}
複製代碼

在CSS中定義它的僞類元素:after和:before利用inherit繼承父類屬性值

.heart:after,
 .heart:before {
           content: '';
           width: inherit;
           height: inherit;
           background: inherit;
           position: absolute;
       }
.heart:after {
           top: -15px;
       }

.heart:before {
           left: -15px;
       }
複製代碼

結果：此時它的形態就是上圖中圖一中的那種形態

2、在兩個僞類身上添加屬性使兩個正方形僞類變爲兩個圓html

border-radius: 50%;
複製代碼

這裏使用不一樣背景色是爲了方便查看它的變化

結果：由於兩者都位移自身一半的寬高，因此變爲了圖二和圖三的形狀

3、再利用CSS3讓它順時針旋轉45度web

transform: rotate(45deg);
複製代碼

結果：大功告成啦！

上述爲拆分步驟，完整代碼以下，直接複製就能使用，按實際須要修改參數

HTMLui

<body>
    <div class="heart">
    </div>
</body>
複製代碼

CSSspa

.heart {
            width: 30px;
            height: 30px;
            top: 50px;
            left: 50px;
            background: red;
            position: relative;
            transform: rotate(45deg);
            /*下面是爲了作兼容*/
            /* -webkit-transform: rotate(45deg); */
            /* -moz-transform: rotate(45deg); */
        }

        .heart:after,
        .heart:before {
            content: '';
            width: inherit;
            height: inherit;
            background: inherit;
            border-radius: 50%;
            /* -webkit-border-radius: 50%; */
            /* -moz-border-radius: 50%; */
            position: absolute;
        }

        .heart:after {
            top: -15px;
        }

        .heart:before {
            left: -15px;
        }
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。