html爱心树
时间: 2023-07-05 11:24:37 浏览: 104
html表白代码-爱心树(3).zip
好的,你想要了解如何制作HTML爱心树。以下是一个简单的HTML和CSS示例,可以制作出一个爱心树:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML爱心树</title>
<style>
body {
background-color: #F3EFEF;
}
.tree {
position: relative;
margin: auto;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
}
.tree:before {
content: "";
position: absolute;
top: -50px;
left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
transform: rotate(180deg);
}
.heart {
position: absolute;
top: -70px;
left: -10px;
width: 100px;
height: 100px;
transform: rotate(-45deg);
background-color: pink;
border-radius: 50%;
box-shadow: inset -20px 0px 0px white;
}
.heart:before, .heart:after {
content: "";
position: absolute;
top: 0px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
}
.heart:before {
left: -50px;
}
.heart:after {
left: 50px;
}
.text {
position: absolute;
top: 70px;
left: -50px;
width: 100px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: white;
text-shadow: 2px 2px #555;
}
</style>
</head>
<body>
<div class="tree">
<div class="heart"></div>
<div class="text">Love</div>
</div>
</body>
</html>
```
你可以将上述代码复制到文本编辑器中,将文件保存为.html格式,然后在浏览器中打开,即可看到一个可爱的HTML爱心树。
阅读全文