实现原理
所谓爱心是指同情怜悯之心态(包括相应的一定行动),它是一种奉献精神,更是关怀、爱护人的思想感情,包括于所有情感之中。今天就用CSS实现一个爱心图案。
- 绘制一个正方形
- 利用伪元素绘制2个圆形
- 利用transform移动2个圆形拼成爱心
- 还原正方形背景色并旋转45度
1、绘制一个正方形
<div className="heart"></div>
.heart {
width: 400px;
height: 400px;
margin: 20% auto auto;
background-color: #ff5d60;
}
![](https://i-blog.csdnimg.cn/blog_migrate/b1a4b9f435a4380c19287f2a57717f78.png)
2、利用伪元素绘制二个圆
<div className="heart"></div>
.heart {
position: relative;
width: 400px;
height: 400px;
margin: 20% auto auto;
background-color: transparent;
&::before,&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background-color: #ff5d60;
border-radius: 100%;
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/539f8951829beac55ce1b545eb0850bb.png)
3、利用transform移动这2个圆
<div className="heart"></div>
.heart {
position: relative;
width: 400px;
height: 400px;
margin: 20% auto auto;
background-color: transparent;
&::before,&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background-color: #ff5d60;
border-radius: 100%;
}
&::before {
transform: translateX(-50%);
}
&::after {
transform: translateY(-50%);
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/475aaa73695386f32783c5fc12e87220.png)
4、还原正方形背景色并旋转45度
<div className="heart"></div>
.heart {
position: relative;
width: 400px;
height: 400px;
margin: 20% auto auto;
&::before,&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background-color: #ff5d60;
border-radius: 100%;
}
&::before {
transform: translateX(-50%);
}
&::after {
transform: translateY(-50%);
}
background-color: #ff5d60;
transform: rotate(45deg);
}
![](https://i-blog.csdnimg.cn/blog_migrate/39ff2d1a7bf183eebe517f3ca4b375c5.png)
![](https://i-blog.csdnimg.cn/blog_migrate/021084370d8295c10e0d13abbaa68338.png)
如果对你有帮助,帮忙点个赞,Thanks♪(・ω・)ノ