给我一个用HTML写的动态表白爱心树
时间: 2023-02-14 10:52:47 浏览: 60
```html
<!DOCTYPE html>
<html>
<head>
<title>爱心树</title>
</head>
<body>
<div id="tree">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
<style>
#tree {
position: relative;
}
.heart {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
border-radius: 25px 25px 0 0;
transform: rotate(45deg);
}
.heart:nth-child(1) {
top: 0;
left: 0;
}
.heart:nth-child(2) {
top: 0;
left: 60px;
}
.heart:nth-child(3) {
top: 60px;
left: 0;
}
.heart:nth-child(4) {
top: 60px;
left: 60px;
}
.heart:nth-child(5) {
top: 30px;
left: 30px;
}
</style>
</body>
</html>
```
这是一个使用HTML和CSS实现的动态表白爱心树。 代码中使用了相对定位和绝对定位来控制爱心的位置,使用了CSS3中的transform属性来旋转爱心。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)