JavaScript与css扭蛋机动画代码
时间: 2023-11-27 19:52:59 浏览: 45
以下是一个简单的 JavaScript 和 CSS 扭蛋机动画代码示例:
HTML 代码:
```
<div class="container">
<div class="machine">
<div class="capsule"></div>
</div>
<button class="btn">抽奖</button>
</div>
```
CSS 代码:
```
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.machine {
position: relative;
width: 200px;
height: 300px;
background-color: #ccc;
border-radius: 10px;
overflow: hidden;
}
.capsule {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 100px;
background-color: #f00;
border-radius: 50%;
animation: drop 2s ease-in-out forwards;
}
@keyframes drop {
0% {
top: -100%;
}
50% {
top: 50%;
}
100% {
top: 100%;
}
}
.btn {
padding: 10px 20px;
background-color: #f00;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
```
JavaScript 代码:
```
const btn = document.querySelector('.btn');
const machine = document.querySelector('.machine');
function startAnimation() {
machine.innerHTML = '<div class="capsule"></div>';
}
btn.addEventListener('click', startAnimation);
```
点击“抽奖”按钮会触发 `startAnimation()` 函数,该函数会将扭蛋机容器中的内容清空,然后插入一个新的扭蛋动画元素。CSS 中的 `drop` 动画会使该元素从顶部掉落到底部。