CSS3编写抽奖效果

来源：互联网发布：我想做淘宝怎么弄编辑：程序博客网时间：2024/06/06 06:35
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>抽奖</title>    <style>        *{margin: 0;padding: 0;}        body{font-family: "Microsoft YaHei";}        .box{width: 600px;height: 600px;background: #d40;position: relative;padding: 20px;margin: 100px auto;border-radius: 50%;}        .lottery{width: 600px;height: 600px;margin: 0 auto;position: relative;background: #330000;box-shadow: 0 0 15px #000;border-radius: 50%;overflow: hidden;}        .block{            width: 300px;            height: 300px;            position: absolute;            box-shadow: 0 0 1px #000 inset;            transform-origin:right bottom 0;            -webkit-transform-origin:right bottom 0;        }        .block:nth-of-type(1){            transform: rotate(45deg) skewY(45deg);            background: orange;        }        .block:nth-of-type(2){            transform: rotate(90deg) skewY(45deg);            background: darkorange;        }        .block:nth-of-type(3){            transform: rotate(135deg) skewY(45deg);            background: orange;        }        .block:nth-of-type(4){            transform: rotate(180deg) skewY(45deg);            background: darkorange;        }        .block:nth-of-type(5){            transform: rotate(225deg) skewY(45deg);            background: orange;        }        .block:nth-of-type(6){            transform: rotate(270deg) skewY(45deg);            background: darkorange;        }        .block:nth-of-type(7){            transform: rotate(315deg) skewY(45deg);            background: orange;        }        .block:nth-of-type(8){            transform: rotate(360deg) skewY(45deg);            background: darkorange;        }        .content{            width: 200px;            height: 230px;            transform-origin: center center 0;            transform:  skewY(-45deg) rotate(-22.5deg) translate(10px, 70px);            -webkit-transform:  skewY(-45deg) rotate(-22.5deg) translate(10px, 70px);            position: absolute;            right: 0;            bottom: 0;            text-align: center;        }        .content .img{            width: 100px;            height: 100px;            margin: 0 auto;        }        .content .text{            width: 100px;            height: 50px;            margin: 0 auto;        }        .content .none{            font-size: 23px;            font-weight: bold;            line-height: 200%;        }        /*按钮样式*/        .btn:before {            display: block;            content: "";            position: absolute;            top: -30px;            left: 30px;            border-bottom: 40px solid #d40;            border-left: 20px solid transparent;            border-right: 20px solid transparent;        }        .btn {            width: 100px;            height: 100px;            border-radius: 50%;            text-align: center;            line-height: 100px;            background-color: #d40;            position: absolute;            top: 270px;            left: 270px;            cursor: pointer;            box-shadow: 0 0 7px #000 inset;            color: #fff;        }    </style></head><body>    <div class="box">        <div class="lottery">             <div class="block">                 <div class="content">                     <div class="text">                         <p>一等奖</p>                         <p>iPhone6 plus</p>                     </div>                     <div class="img">                         <img src="images/iPhone6plus.jpg" alt="iPhone6plus">                     </div>                 </div>             </div>             <div class="block">                  <div class="content">                      <div class="none">                          <p>再接再厉</p>                      </div>                  </div>             </div>             <div class="block">                 <div class="content">                     <div class="text">                         <p>二等奖</p>                         <p>20元话费</p>                     </div>                     <div class="img">                         <img src="images/20yuan.jpg" alt="20元">                     </div>                 </div>             </div>             <div class="block">                 <div class="content">                     <div class="none">                         <p>再接再厉</p>                     </div>                 </div>             </div>             <div class="block">                 <div class="content">                     <div class="text">                         <p>三等奖</p>                         <p>Apple</p>                     </div>                     <div class="img">                         <img src="images/apple.jpg" alt="apple">                     </div>                 </div>             </div>             <div class="block">                 <div class="content">                     <div class="none">                         <p>再接再厉</p>                     </div>                 </div>             </div>             <div class="block">                 <div class="content">                     <div class="text">                         <p>鼓励奖</p>                         <p>iPhone6 plus</p>                     </div>                     <div class="img">                         <img src="images/ipadmini.jpg" alt="ipadmini">                     </div>                 </div>             </div>             <div class="block">                 <div class="content">                     <div class="none">                         <p>再接再厉</p>                     </div>                 </div>             </div>        </div>        <div class="btn"></div>    </div>    <script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.2.min.js"></script>    <script>        var lottery={            init:function (){               lottery.clickBtn();            },            clickBtn:function(){                var lottery = {                    light:"odd",                    prize:["鼓励奖","再接再厉","三等奖","再接再厉","二等奖","再接再厉","一等奖","再接再厉"],                    p:0                };                function click(){                    var n=Math.floor(Math.random()*8+1);                    lottery.p=n*45+1822.5;                    $('.lottery').css({                        "transition":"all 5s ease-in-out",                        "transform":"rotate("+lottery.p+"deg)",                        "-webkit-transform":"rotate("+lottery.p+"deg)"                    });                };                function  result(){                    var num=(lottery.p-1822.5)/45;                    if(num%2==0){                        alert('很遗憾,请你'+lottery.prize[num-1]+"!");                    }else{                        alert('恭喜您，获得'+lottery.prize[num-1]+"!");                    }                };                //点击按钮触发抽奖                $('.btn').bind('click',click);                //动画停止后弹出中奖信息及停止动画                $('.lottery')[0].addEventListener('transitionend',function(){                    result();                    $('.lottery').css({                        "transition":"none",                        "transform":"none",                        "-webkit-transform":"none"                    });                });            }        }        $(function(){           lottery.init();        });    </script></body></html>
这里写图片描述
阅读全文
1 0