CSS3编写抽奖效果


<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 plusp>
                     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>Applep>
                     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 plusp>
                     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>

CSS3编写抽奖效果_第1张图片

你可能感兴趣的:(CSS3)