html写表白爱心

原创已于 2023-12-13 10:29:10 修改 · 3.6k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

收录于

于 2019-10-09 21:27:59 首次发布

html+css 专栏收录该内容

3 篇文章

订阅专栏

本文提供了一个使用HTML和CSS编写的简单爱心表白代码示例。通过调整元素的位置和旋转角度，两个红色的心形div元素组合成一个完整的爱心图案，背景采用渐变色设计，增加了视觉效果。当鼠标悬停在爱心上时，爱心会放大，增强了交互体验。

html写表白爱心

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>love</title>
	<style>
		body{
			height: 800px;
			background: radial-gradient(white,skyblue);   /*背景颜色*/
		}
		.box{
			margin:250px auto;
			width: 600px;
			height: 300px;
			padding:50px 0 0 250px;
			
		}
			.box div {
				float:left;
				width: 200px;
				height: 250px;
				background-color: red;
				border-radius: 99% 99% 0 0 ;
			}
	
			.box:hover{
				transform: scale(1.5,1.5);
			}
		.l{
			transform: rotate(-62deg);
		}
		.r{
			margin-left: -75px;
			transform: rotate(62deg);
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="l"></div>
		<div class="r"></div>
	</div>
</body>
</html>