纯css 实现爱心效果

传送门:

http://106.12.120.191/html/Love.html

效果如下:
纯css 实现爱心效果_第1张图片
代码如下:


<html>
<head>
	<title>爱心title>
head>
<style type="text/css" >
.heart{
	width: 100px;
	height: 100px;
	transform: rotate(45deg);
	background-color: red;
	margin-top: 40px;
	margin-left: 40px;

}
.heart::before{//::before css3用法 :before css2用法
   position: absolute;//要用绝对位置
   content: '';//此项必须加,不然长度为0
   background-color: red;
   display: block;
   width: 100px;
   height: 100px;
   border-radius: 50%;//变圆
   left: -50px;
}
.heart::after{
   position: absolute;
   content: '';//此项必须加,不然长度为0
   background-color: red;
   display: block;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   top: -50px;

}

style>
<body>
<div class="heart">div>	
div>
body>
html>

步骤一:
先画个正方形:
html代码

.......
<body>
<div class="heart">div>	
div>
body>
......

css代码:

.heart{
	width: 100px;
	height: 100px;
	background-color: red;
	margin-top: 40px;
	margin-left: 40px;

}

再在正方形里画两个圆;
css 代码如下:

.heart{
	width: 100px;
	height: 100px;
	transform: rotate(45deg);
	background-color: red;
	margin-top: 40px;
	margin-left: 40px;

}
.heart::before{
   position: absolute;
   content: '';
   background-color: pink;
   display: block;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   left: -50px;
}
.heart::after{
   position: absolute;
   content: '';
   background-color:yellow;
   display: block;
   width: 100px;
   height: 100px;
   border-radius: 50%;
}

截图如下:
纯css 实现爱心效果_第2张图片
移动其位置:
截图如下:
纯css 实现爱心效果_第3张图片
css代码如下:

.heart{
	width: 100px;
	height: 100px;
	transform: rotate(45deg);
	background-color: red;
	margin-top: 40px;
	margin-left: 40px;

}
.heart::before{
   position: absolute;
   content: '';
   background-color: pink;
   display: block;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   left: -50px; 
}
.heart::after{
   position: absolute;
   content: '';
   background-color: yellow;
   display: block;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   top: -50px;  

}

最后一步,颜色换成红色就行了(手动斜眼笑)

你可能感兴趣的:(前端,css,爱心)