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;
        }
复制代码