js火箭升空的代码包括html和css
时间: 2023-09-09 16:08:12 浏览: 88
好的,以下是一个基本的 HTML、CSS 和 JavaScript 代码,用于实现一个升空火箭的动画效果:
HTML:
```html
<div class="rocket-container">
<img src="rocket.png" alt="Rocket" class="rocket">
</div>
```
CSS:
```css
.rocket-container {
position: relative;
width: 100%;
height: 500px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.rocket {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
transition: transform 2s ease-in-out;
}
.launch {
transform: translateY(-100%);
}
.ascend {
transform: translateY(-200%);
}
.descend {
transform: translateY(-100%);
}
.land {
transform: translateY(0%);
}
```
JavaScript:
```javascript
// 获取火箭元素
const rocket = document.querySelector('.rocket');
// 发射火箭
function launch() {
rocket.classList.add('launch');
}
// 火箭上升
function ascend() {
rocket.classList.add('ascend');
}
// 火箭下降
function descend() {
rocket.classList.add('descend');
}
// 火箭着陆
function land() {
rocket.classList.add('land');
}
// 监听火箭动画完成事件
rocket.addEventListener('animationend', function(event) {
// 如果是发射动画完成
if (event.animationName === 'launch') {
// 开始上升
ascend();
}
// 如果是上升动画完成
else if (event.animationName === 'ascend') {
// 开始下降
descend();
}
// 如果是下降动画完成
else if (event.animationName === 'descend') {
// 着陆
land();
}
});
// 触发火箭发射
launch();
```
以上代码中,我们使用了 `transform` 属性和 `transition` 动画效果控制火箭的上升、下降等动画效果;使用了 `animationend` 事件监听每个动画完成的事件,以便在每个阶段结束后执行相应的操作;使用 `classList` 属性来添加和删除 CSS 类,以控制火箭的动画效果。
注意:代码中的 `rocket.png` 图片需要替换成您自己的火箭图片。