css抽奖滚动效果
时间: 2023-07-23 09:07:21 浏览: 180
你可以使用CSS的animation属性来实现抽奖滚动效果。以下是一个简单的例子:
HTML:
```
<div class="roll-container">
<ul class="roll-list">
<li>奖品1</li>
<li>奖品2</li>
<li>奖品3</li>
<li>奖品4</li>
<li>奖品5</li>
</ul>
<button class="roll-btn">开始抽奖</button>
</div>
```
CSS:
```
.roll-container {
position: relative;
width: 200px;
height: 100px;
overflow: hidden;
}
.roll-list {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style: none;
}
.roll-list li {
display: block;
height: 20px;
line-height: 20px;
}
.roll-btn {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.roll-list li:nth-child(1) {
animation: roll 2s linear infinite;
}
.roll-list li:nth-child(2) {
animation: roll 2s linear 0.2s infinite;
}
.roll-list li:nth-child(3) {
animation: roll 2s linear 0.4s infinite;
}
.roll-list li:nth-child(4) {
animation: roll 2s linear 0.6s infinite;
}
.roll-list li:nth-child(5) {
animation: roll 2s linear 0.8s infinite;
}
@keyframes roll {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
```
在这个例子中,我们使用了animation属性来实现滚动效果。我们给每一个奖品li元素分配了一个不同的animation-delay值,以便它们依次滚动。我们还使用了transform属性来控制滚动的方向和距离。最后,我们在按钮上添加了一个事件监听器,以便在点击时开始或停止抽奖滚动。