使用 CSS3 实现转盘抽奖效果

微信和大型商场常常会有转盘抽奖的活动,比如上海移动和教授的抽取积分活动等。我们可以通过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"
	});
}

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值