版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lujie_1996/article/details/79015667
微信和大型商场常常会有转盘抽奖的活动，比如上海移动和教授的抽取积分活动等。我们可以通过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"
});
}