写一个爱心降落的动画代码
时间: 2023-05-13 07:07:44 浏览: 207
以下是一个简单的爱心降落动画的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>爱心降落动画</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.heart {
position: absolute;
width: 50px;
height: 50px;
background-color: #ff69b4;
transform: rotate(45deg);
animation: heart-fall 2s ease-in-out infinite;
}
@keyframes heart-fall {
0% {
transform: rotate(45deg) translate(0, -100vh);
}
50% {
transform: rotate(45deg) translate(0, 50vh);
}
100% {
transform: rotate(45deg) translate(0, 100vh);
}
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>
```
这个动画使用 CSS3 的动画特性实现,通过关键帧动画让爱心从顶部落下,到中间位置反弹一下,最终落到底部。可以通过调整关键帧动画的参数来改变动画效果。
阅读全文
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pptx](https://img-home.csdnimg.cn/images/20241231044947.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)