<!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>
转载请注明原文地址: https://www.6miu.com/read-79810.html
