CSS3 热气球动画
时间: 2023-12-22 20:28:25 浏览: 44
以下是一个使用CSS3实现的热气球动画的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Hot Air Balloon Animation</title>
<style type="text/css">
.hot-air-balloon {
position: relative;
width: 200px;
height: 300px;
margin: 50px auto;
background: #f7d9aa;
border-radius: 50% 50% 0 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
animation: balloon 10s ease-in-out infinite;
}
.hot-air-balloon:before {
content: "";
position: absolute;
top: 0;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #f7d9aa;
transform: rotate(45deg);
}
.hot-air-balloon:after {
content: "";
position: absolute;
top: 20px;
left: 50%;
margin-left: -50px;
width: 100px;
height: 100px;
background: #f7d9aa;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
@keyframes balloon {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-200px) rotate(0deg);
}
100% {
transform: translateY(0) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="hot-air-balloon"></div>
</body>
</html>
```
这段代码会生成一个热气球的动画效果,热气球会在页面中上下浮动。你可以将这段代码复制到一个HTML文件中并在浏览器中打开,就可以看到这个动画效果了。