教你用css3实现心形

时间:2022-12-24 14:51:10
首先,添加一个 <div>元素作为我们的心形状的基础。
<div class="heart-shape"></div>
然后,我们创建宽度和高度。
.heart-shape{
position: relative;
width: 200px;
height: 200px;
background-color: rgba(250,184,66, 0.8);
}
我们将利用伪元素before和 :after。第一次设置 :before伪元素作为我们的第一个循环。我们使它成为一个同样大小的宽度和高度,就像我们div。然后,我们把它变成一圈用border - radius 50%和把它放在左边。
.heart-shape:before{

    position: absolute;

    bottombottom: 0px;

    left: -90px;

    width: 200px;

    height: 200px;

    content: '';

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    background-color: rgba(250,184,66, 0.8);

}
之后,我们与伪元素创建第二个圈 :after与我们第一圈一样的风格。然后放在顶部位置。
 
.heart-shape:after{

    position: absolute;

    top: -90px;

    rightright: 0px;

    width: 200px;

    height: 200px;

    content: '';

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    background-color: rgba(250,184,66, 0.8);

}
我们可以把这两个相同风格的伪元素选择器分组如下:
.heart-shape:before,

.heart-shape:after{

    position: absolute;

    width: 200px;

    height: 200px;

    content: '';

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    background-color: rgba(250,184,66, 0.8);

}

.heart-shape:before{

    bottombottom: 0px;

    left: -90px;

}

.heart-shape:after{

    top: -90px;

    rightright: 0px;

}
这些都准备的差不多了,现在就用CSS3装换

在HTML中心形的完整代码如下:

<div class="heart-shape"></div>
.heart-shape{

    position: relative;

    margin:100px auto;

    width: 200px;

    height: 200px;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    background-color: rgba(250,184,66, 1);

}

.heart-shape:before,

.heart-shape:after{

    position: absolute;

    width: 200px;

    height: 200px;

    content: '';

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -o-border-radius: 50%;

    border-radius: 50%;

    background-color: rgba(250,184,66, 1);

}

.heart-shape:before{

    bottom: 0px;

    left: -90px;

}

.heart-shape:after{

    top: -90px;

    right: 0px;

}

本文作者: Mrcxt
查看更多内容: 进入Mrcxt的wordpress博客