css实现爱心

最新推荐文章于 2023-03-29 02:22:25 发布

Guo_Elleny

最新推荐文章于 2023-03-29 02:22:25 发布

阅读量303

点赞数

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

本文链接：https://blog.csdn.net/Guo_Elleny/article/details/114669955

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

纯html css实现爱心案例

原理:
心型❤️是可以由半个正方向+两个半圆形构成的
如图
在这里插入图片描述
得到这样的图形后再旋转45度角，就可以变成爱心形状了

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		.heart
		{
			position: absolute;
			width: 100px;
			height: 100px;
			background-color: yellow;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			transform: rotate(-45deg);
		}
		.left
		{
			position: absolute;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: #00A4FF;
			top:-50px;
		}
		.right
		{
			position: absolute;
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: #4cffab;
			left: 50px;
			
		}
	</style>
</head>
<body>
	<div class="heart">
		<div class="left">
			
		</div>
		<div class="right">
			
		</div>
	</div>
</body>
</html>

把颜色变成一样就能变成爱心了
在这里插入图片描述

Guo_Elleny

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css实现爱心

纯html css实现爱心案例原理:心型❤️是可以由半个正方向+两个半圆形构成的如图得到这样的图形后再旋转45度角，就可以变成爱心形状了<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-
复制链接

扫一扫