微信和大型商場常常會有轉盤抽獎的活動，比如上海移動和教授的抽取積分活動等。我們可以通過CSS3的transform屬性來實現轉盤的旋轉。同時，transition屬性實現過渡動畫，它具有四個子屬性，依次爲
1. transition-property（過渡屬性，默認爲all）
2. transition-during（過渡時間，默認0s）
3. transition-timing-function（過渡函數，默認ease貝賽爾曲線，還包括liner、ease-in、ease-out、ease-in-out等）
4. transition-delay（過渡延時，默認0s）
該效果在低版本瀏覽器上可能會失效。
最終效果
目錄結構
JQuery請從官網（http://jquery.com/download/）下載。
代碼
lottery.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/lottery.css" />
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
</head>
<body>
<div class="box">
<div class="lottery">
<div class="block">
<div class="content">
<div class="none">未中獎</div>
</div>
</div>
<div class="block">
<div class="content">
<div class="img">
<img src="img/小米手環.png" />
</div>
<div class="text">
<p>一等獎</p>
<p>小米手環</p>
</div>
</div>
</div>
<div class="block">
<div class="content">
<div class="none">未中獎</div>
</div>
</div>
<div class="block">
<div class="content">
<div class="none">未中獎</div>
</div>
</div>
<div class="block">
<div class="content">
<div class="img">
<img src="img/羅技鼠標.png" />
</div>
<div class="text">
<p>二等獎</p>
<p>羅技鼠標</p>
</div>
</div>
</div>
<div class="block">
<div class="content">
<div class="none">未中獎</div>
</div>
</div>
<div class="block">
<div class="content">
<div class="img">
<img src="img/一包糖果.png" />
</div>
<div class="text">
<p>三等獎</p>
<p>一包糖果</p>
</div>
</div>
</div>
<div class="block">
<div class="content">
<div class="none">未中獎</div>
</div>
</div>
</div>
<div class="btn">抽 獎</div>
<div class="str"></div>
</div>
<script type="text/javascript" src="js/lottery.js"></script>
</body>
</html>
lottery.css
* {
margin: 0;
padding: 0;
}
body {
font-family: "Microsoft YaHei",微軟雅黑;
}
.box {
width: 600px;
height: 600px;
background-color: #DEA681;
border-radius: 50%;
margin: 30px auto;
padding: 20px;
position: relative;
overflow: hidden;
}
.lottery {
width: 600px;
height: 600px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
position: relative;
background-color: #330000;
box-shadow: 0 0 15px #000;
}
.block {
box-shadow: 0 0 1px #000 inset;
position: absolute;
width: 300px;
height: 300px;
transform-origin: right bottom 0;
-webkit-transform-origin: right bottom 0;
}
.block:nth-child(odd) {
background-color: #F1AAA6;
}
.block:nth-child(even) {
background-color: #FD5B78;
}
.block:nth-child(1) {
transform: rotate(0deg) skewY(45deg);
}
.block:nth-child(2) {
transform: rotate(45deg) skewY(45deg);
}
.block:nth-child(3) {
transform: rotate(90deg) skewY(45deg);
}
.block:nth-child(4) {
transform: rotate(135deg) skewY(45deg);
}
.block:nth-child(5) {
transform: rotate(180deg) skewY(45deg);
}
.block:nth-child(6) {
transform: rotate(225deg) skewY(45deg);
}
.block:nth-child(7) {
transform: rotate(270deg) skewY(45deg);
}
.block:nth-child(8) {
transform: rotate(315deg) skewY(45deg);
}
.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;
font-size: 20px;
line-height: 32px;
margin: 0 auto;
}
.content .none {
width: 34px;
height: 200px;
margin: 0 auto;
text-align: center;
font-size: 34px;
line-height: 200%
font-weight: bold;
}
.content img {
width: 80px;
height: 100px;
}
.btn {
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
line-height: 100px;
background-color: #9966CC;
position: absolute;
font-size: 28px;
top: 270px;
left: 270px;
cursor: pointer;
box-shadow: 0 0 14px #000 inset;
color: #FFF;
}
.str {
height: 0px;
width: 0px;
position: absolute;
top: 10px;
left: 300px;
border-top: 60px solid #9966CC;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
lottery.js
var lottery = {
ch: 0
}
function clickBtn() {
var n1 = Math.floor(Math.random()*8+1);
var n2 = Math.floor(Math.random()*4+4);
lottery.ch = 45*n1 + 360*n2 + 22.5;
$(this).unbind().css("cursor", "wait");
$('.lottery').css({
"transition": "all 8s ease",
"transform": "rotate("+lottery.ch+"deg)",
"-webkit-transform": "rotate("+lottery.ch+"deg)"
});
}
$('.btn').bind('click', clickBtn);
$('.lottery')[0].addEventListener('transitionend',function(){
$('.btn').bind('click',clickBtn).css("cursor","pointer");
setTimeout(result,2000);
})
function result(){
alert("點擊確認，再次開始遊戲！");
$('.lottery').css({
"transition":"none",
"transform":"none",
"-webkit-transform":"none"
});
}