编写一个爱心的网页代码
时间: 2024-05-30 10:12:56 浏览: 69
<!DOCTYPE html>
<html>
<head>
<title>爱心</title>
<meta charset="UTF-8">
<style>
body {
background-color: #f7e9e3;
}
.heart {
position: relative;
width: 100px;
height: 90px;
transform: rotate(-45deg);
margin: 50px auto;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background-color: #f44336;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.message {
font-size: 24px;
font-weight: bold;
color: #4f4f4f;
text-align: center;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="heart"></div>
<div class="message">我爱你</div>
</body>
</html>
阅读全文