使用CSS简单实现宝箱打开抽奖动画

效果截图：
CSS实现宝箱打开抽奖动画.gif

HTML：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>抽奖</title>
    <link rel="stylesheet" type="text/css" href="css/drawbox.css"/>
</head>
<body>
    
    <div class="draw-box">
        
        <!--背景光-->
        <div class="bg-light pic-rotate"></div>
        
        <!--宝箱-->
        <div class="close-box">
            
            <!--提示信息-->
            <div class="box-msg hide">
                <!--中奖-->
                <div class="winning hide">
                    <h3 class="box-msg-title">中奖啦！</h3>
                    <div class="box-msg-congent">恭喜您获得*****1个，请到我的预约里查看并支付尾款！</div>
                    <div class="box-msg-operat">
                        <button type="button" class="btn-blue">查看我的预约</button>
                    </div>
                </div>
                <!--未中奖-->
                <div class="notWon hide">
                    <div class="box-msg-congent">很遗憾您未抽中预约名额，请明天再来</div>
                    <div class="box-msg-tip">温馨提示：活动期间，每日都有一次抽奖机会</div>
                </div>
            </div>
            
        </div>
            
        <!--提示操作-->
        <div class="prompt-operation">点击箱子进行抽奖</div>
        
        
        
    </div>
    
</body>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/drawbox.js" type="text/javascript" charset="utf-8"></script>
</html>

CSS：

* {
    padding: 0px;
    margin: 0px;
}

body {
    overflow: hidden;
}

.draw-box {
    width: 100%;
}

.bg-light {
    background: url(../img/light.png) center no-repeat;
    width: 452px;
    height: 510px;
    z-index: 1;
    position: absolute;
    left: calc((100% - 452px) / 2);
}

.bg-light.pic-rotate {
    -webkit-animation: pic-rotate 10s infinite linear;
}

.close-box {
    background: url(../img/chest.png) 0px 0px no-repeat;
    background-size: 320px auto;
    width: 320px;
    height: 138px;
    z-index: 2;
    position: absolute;
    left: calc((100% - 320px) / 2);
    top: 180px;
}

.close-box.box-open {
    background: url(../img/chest.png) 0px -139px no-repeat;
    background-size: 320px auto;
    width: 320px;
    height: 138px;
    z-index: 2;
    position: absolute;
    left: calc((100% - 320px) / 2);
    top: 180px;
}

.close-box.pic-shake {
    -webkit-animation: pic-shake 1.2s linear;
}

.box-msg {
    width: 80%;
    height: auto;
    margin: 0px auto;
    border: 5px solid #fce92f;
    background-color: rgba(255, 255, 255, 0.8);
    position: relative;
    top: -100px;
    box-shadow: 1px 1px 3px #888888;
    border-radius: 10px;
    padding: 10px;
    z-index: 5;
}

.hide{
    display: none;
}

.box-msg-title{
    text-align: center;
    margin: 0px 0px 10px 0px;
}

.box-msg-congent{
    line-height: 28px;
    margin: 0px 0px 10px 0px;
    color: #610c03;
}

.box-msg-tip{
    font-size: 12px;
    color: #333333;
}

.box-msg-operat{
    text-align: center;
}

.btn-blue{
    border: none;
    background-color: #fce92f;
    padding: 3px 15px;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #888888;
}

.prompt-operation{
    width: 100%;
    position: absolute;
    top: 350px;
    text-align: center;
    color: #cd1e03;
    text-shadow: 1px 1px 3px #ffd728;
}

@-webkit-keyframes pic-rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

@-webkit-keyframes pic-shake {
    0% {-webkit-transform:scale(1);}
    10%,20% {-webkit-transform:scale(0.9) rotate(-3deg);}
    30%,50%,70%,90% {-webkit-transform:scale(1.1) rotate(3deg);}
    40%,60%,80% {-webkit-transform:scale(1.1) rotate(-3deg);}
    100% {-webkit-transform:scale(1) rotate(0);}
}

JS:

(function(window,$){
    
    drawBox = {
        
        openBox: function(){
            $(this).addClass('pic-shake');
            let val = Math.ceil(Math.random()*10);
            if(val == 4){
                setTimeout(function(){
                    $('.close-box').addClass('box-open');
                    setTimeout(function(){
                        $('.box-msg').show();
                        $('.winning').show();
                    },200);
                }, 1200);
            }else{
                setTimeout(function(){
                    $('.close-box').addClass('box-open');
                    setTimeout(function(){
                        $('.box-msg').show();
                        $('.notWon').show();
                    },200);
                }, 1200);
            }
            $('.close-box').off('click');
        },
        
    }
    
    $(function(){
        
        $('.close-box').on('click', drawBox.openBox);
        
    })
    
})(window,$)

下载地址：https://pan.baidu.com/s/1i1Lnv7v9qGhu15nfT3jYIw&shfl=shareset
提取密码：ijmr
解压密码：www.angbike.com

已自动关闭评论