给我一个使用html5写的表白动态爱心树
时间: 2023-02-14 19:05:40 浏览: 66
以下是一个使用 HTML5 和 CSS3 实现的动态爱心树的简单示例:
HTML:
```
<div class="heart-tree">
<div class="trunk"></div>
<div class="leaves"></div>
<div class="heart"></div>
</div>
```
CSS:
```
.heart-tree {
position: relative;
}
.trunk {
width: 50px;
height: 100px;
background: brown;
position: absolute;
bottom: 0;
left: calc(50% - 25px);
}
.leaves {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid green;
position: absolute;
bottom: 100px;
left: calc(50% - 50px);
}
.heart {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid red;
position: absolute;
bottom: 200px;
left: calc(50% - 25px);
animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
50% {
transform: scale(1);
}
}
```
请注意,这只是一个简单的示例,您可以根据需要调整样式和动画。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![xlsx](https://img-home.csdnimg.cn/images/20210720083732.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)