七夕专属程序员的浪漫之HTML爱心

最新推荐文章于 2024-01-01 17:10:22 发布

小孙同学1024

最新推荐文章于 2024-01-01 17:10:22 发布

阅读量191

点赞数

分类专栏：程序员的浪漫文章标签： html css css3

本文链接：https://blog.csdn.net/Annzz123/article/details/132201096

版权

程序员的浪漫专栏收录该内容

8 篇文章 0 订阅

订阅专栏

情人节到了快把这简单又好看的HTML爱心送给最爱的人吧！！

只用最简单的HTML语法和CSS样式

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>♥</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			body {
				background-color: pink;
			}

			#frame {
				position: relative;
				width: 400px;
				height: 300px;
				margin: 250px auto;
			}

			.left,
			.right {
				top: 0;
				width: 200px;
				height: 200px;
				border-radius: 50%;
			}

			.left {
				left: 35px;

			}

			.right {
				right: 35px;
				z-index: -1;
			}

			.bottom {
				bottom: 36px;
				left: 100px;
				width: 200px;
				height: 200px;
				transform: rotate(45deg);
				z-index: -1;

			}

			.heart {
				position: absolute;
				box-shadow: 0 0 40px #d5093c;
				animation: beat .8s ease infinite normal;
				background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
			}

			@keyframes beat {
				0% {
					transform: scale(1) rotate(225deg);
					box-shadow: 0 0 40px #d5093c;
				}

				50% {
					transform: scale(1.1) rotate(225deg);
					box-shadow: 0 0 70px #d5093c;
				}

				100% {
					transform: scale(1) rotate(225deg);
					box-shadow: 0 0 40px #d5093c;
					;
				}
			}
		</style>
	</head>
	<body>
		<div id="frame">
			<div class="heart left"></div>
			<div class="heart right"></div>
			<div class="heart bottom"></div>
		</div>
	</body>
</html>

让我们来看看效果图吧！