纯css 实现爱心效果

最新推荐文章于 2024-07-11 16:15:52 发布

huas_mcfeng

最新推荐文章于 2024-07-11 16:15:52 发布

阅读量4.2k

点赞数 4

分类专栏：前端文章标签： css 爱心

本文链接：https://blog.csdn.net/qq_41592652/article/details/98868119

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果如下：
在这里插入图片描述
代码如下:

<!DOCTYPE html>
<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代码如下：

.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;  

}