写一个按钮和灰色的盒子,点击按钮之后,按钮会消失,盒子会从上而下逐渐变成天蓝色,等整个盒子变成天蓝色之后,按钮会再次出现,点击会出现相同的效果
时间: 2023-08-29 10:06:00 浏览: 38
HTML部分:
```html
<div class="container">
<button id="btn">点击我</button>
<div class="box"></div>
</div>
```
CSS部分:
```css
.container {
position: relative;
width: 200px;
height: 300px;
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
transition: background-color 1s ease;
}
.active {
background-color: skyblue;
}
```
JavaScript部分:
```javascript
const button = document.getElementById('btn');
const box = document.querySelector('.box');
let isAnimating = false;
button.addEventListener('click', () => {
if (!isAnimating) {
isAnimating = true;
button.style.display = 'none';
box.classList.add('active');
setTimeout(() => {
button.style.display = 'block';
box.classList.remove('active');
isAnimating = false;
}, 1000);
}
});
```
效果展示:https://codepen.io/hanfengmi/pen/QWpYpJG