水泡炸裂效果如何用js和css实现
时间: 2024-03-12 22:44:56 浏览: 23
水泡炸裂效果可以用 JS 和 CSS 实现。以下是一种可能的实现方式:
HTML:
```html
<div class="bubble"></div>
```
CSS:
```css
.bubble {
position: relative;
width: 100px;
height: 100px;
background-color: #00aaff;
border-radius: 50%;
animation: bubble 1s forwards;
}
@keyframes bubble {
0% {
transform: scale(0);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(2);
opacity: 0;
}
}
```
JS:
```javascript
const bubble = document.querySelector('.bubble');
bubble.addEventListener('click', () => {
bubble.classList.add('burst');
});
```
CSS:
```css
.bubble.burst {
animation: burst 1s forwards;
}
@keyframes burst {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
opacity: 0.5;
}
100% {
transform: scale(3);
opacity: 0;
}
}
```
这个实现方式中,点击 `.bubble` 元素会触发 `burst` 类的 CSS 动画,使气泡炸裂并消失。可以根据需要调整 CSS 中的动画参数来实现不同的效果。