jquery实现大转盘抽奖效果代码

代码语言:html

所属分类:大转盘

代码描述:jquery实现大转盘抽奖效果代码

代码标签: jquery 转盘 抽奖

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body {
        	transition:background-color 1s linear 0s
        }
        * {
        	box-sizing:border-box
        }
        .box {
        	width:250px;
        	height:250px;
        	box-shadow:0 0 10px rgba(0,0,0,.3);
        	position:relative;
        	margin:30px auto;
        	border-radius:50%;
        	overflow:hidden;
        	text-align:center
        }
        .box .inner {
        	width:100%;
        	height:100%;
        	transition:all 1s ease-out 0s
        }
        .box .inner:after {
        	content:'';
        	position:absolute;
        	top:-1px;
        	left:-1px;
        	bottom:-1px;
        	right:-1px;
        	border:10px solid #FFF;
        	border-radius:50%;
        	box-shadow:0 0 22px rgba(0,0,0,.7) inset
        }
        .box .inner .item {
        	position:absolute;
        	left:50%;
        	margin-left:-75px;
        	width:0;
        	height:0;
        	border-style:solid;
        	border-width:125px 75px 0;
        	border-color:#19c transparent;
        	transform-origin:bottom
        }
        .box .inner .item span {
        	font-size:30px;
        	margin-top:-82px;
        	position:relative;
        	top:-78px;
        	z-index:9999;
        	color:#FFF;
        	left:-20px;
        	width:40px;
        	height:40px;
        	text-align:center;
        	line-height:40px!important;
        	text-shadow:0 0 1px #000
        }
        .box .inner .item:nth-child(1) {
        	border-top-color:#c5483b
        }
        .box .inner .item:nth-child(2) {
        	border-top-color:#26a68d
        }
        .box .inner .item:nth-child(3) {
        	border-top-color:#3285bc
        }
        .box .inner .item:nth-child(4) {
        	border-top-color:#415568
        }
        .box .inner .item:nth-child(5) {
        	border-top-color:#f3a01c
        }
        .box .inner .item:nth-child(6) {
        	border-top-color:#d45b0b
        }
        .spin {
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0