[分享]css3摇奖机

CSS3摇奖机是一种通过使用CSS3实现的奖品随机展示效果。该效果不仅简洁、美观，而且十分实用。下面就让我们来学习如何实现CSS3摇奖机。 开始抽奖 首先...

CSS3摇奖机是一种通过使用CSS3实现的奖品随机展示效果。该效果不仅简洁、美观，而且十分实用。下面就让我们来学习如何实现CSS3摇奖机。

<div class="container">
    <div class="shake-box">
        <ul class="shake-list">
            <li>
                <img src="./img/prize-1.png" alt="">
            </li>
            <li>
                <img src="./img/prize-2.png" alt="">
            </li>
            <li>
                <img src="./img/prize-3.png" alt="">
            </li>
            <li>
                <img src="./img/prize-4.png" alt="">
            </li>
            <li>
                <img src="./img/prize-5.png" alt="">
            </li>
            <li>
                <img src="./img/prize-6.png" alt="">
            </li>
        </ul>
        <button class="btn-play">开始抽奖</button>
    </div>
</div> 

首先，我们需要准备好摇奖机的HTML结构。上面的代码就是一个简单的摇奖机框架，包含一个容器、一个抽奖按钮和一组奖品图片。

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.shake-box {
    position: relative;
    width: 300px;
    height: 400px;
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border-radius: 5px;
}
.btn-play {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 30px;
    background-color: #2980b9;
    border: none;
    color: #FFF;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
} 

接下来，我们需要为摇奖机添加一些基本的样式。上面的代码中，我们使用绝对定位和transform属性将摇奖机定位到屏幕正中央，然后，为摇奖机容器添加了一些样式，包括背景颜色、阴影、边框、圆角等。最后，我们还为抽奖按钮添加了一些样式，让它看起来更加美观。

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
} 

最后，我们需要为摇奖机添加一个抽奖动画。上面的代码中，我们使用了CSS3的关键帧动画属性@keyframes，通过定义一组旋转的角度来模拟摇动的效果。然后，我们再为动态class添加动画属性即可。

至此，我们已经完成了CSS3摇奖机的整体实现。希望这篇文章能够对大家有所帮助！