jquery rotate实现大转盘抽奖中奖页面效果代码-html代码-BFW代码库

jquery rotate实现大转盘抽奖中奖页面效果代码

代码语言：html

所属分类：大转盘

代码描述：jquery rotate实现大转盘抽奖中奖页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        * {
	margin:0;
	padding:0;
}
body {

	font-family:"Microsoft Yahei";
	background-color:#15734b;
}
h1 {
	width:900px;
	margin:40px auto;
	font:32px "Microsoft Yahei";
	text-align:center;
	color:#fff;
}
.dowebok {
	width:894px;
	height:563px;
	margin:0 auto;
	background-image:url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/1/s3_bg.png);
}
.rotary {
	position:relative;
	float:left;
	width:504px;
	height:504px;
	margin:20px 0 0 20px;
	background-image:url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/1/g.png);
}
.hand {
	position:absolute;
	left:144px;
	top:144px;
	width:216px;
	height:216px;
	cursor:pointer;
}
.list {
	float:right;
	width:300px;
	padding-top:44px;
}
.list strong {
	position:relative;
	left:-45px;
	display:block;
	height:65px;
	line-height:65px;
	font-size:32px;
	color:#ffe63c;
}
.list h4 {
	height:45px;
	margin:30px 0 10px;
	line-height:45px;
	font-size:24px;
	color:#fff;
}
.list ul {
	line-height:36px;
	list-style-type:none;
	font-size:12px;
	color:#fff;
}
.list span {
	display:inline-block;
	width:94px;
}

    </style>
</head>

<body>
    <div class="dowebok">
        <div class="rotary"><img class="hand" src="//repo.bfw.wiki/bfwrepo/images/zhuanpan/1/z.png" alt="" /></div>
        <div class="list"><strong>100%中奖</strong>
            <h4>中奖用户名单</h4>
            <ul>
                <li><span>154**88</span><span>获得1个月绿钻</span></li>
                <li><span>6161***034</span><span>获得11个月绿钻</span></li>
                <li><span>2349***224</span><span>获得1个月绿钻</span></li>
                <li><span>433***54</span><span>获得2个月绿钻</span></li>
                <li><span>5154***234</span><span>获得4个月绿钻</span></li>
                <li><span>3213***123</span><span>获得2个月绿钻</span></li>
                <li><span>898****362</span><span>获得9个月绿钻</span></li>
            </ul>
        </div>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></.........完整代码请登录后点击上方下载按钮下载查看