jquery实现一个大转盘抽奖代码
代码语言:html
所属分类:大转盘
代码描述:jquery实现一个大转盘抽奖代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html><head>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.main {
width: 500px;
height: 500px;
background-color: #ff8181;
border-radius: 50%;
/* overflow: hidden; */
position: relative;
margin: 50px auto 0;
box-shadow: 1px 1px 5px 2px #999;
}
.cj-disc {
width: 460px;
height: 460px;
border-radius: 50%;
border: 10px dotted #ffec89;
position: absolute;
top: 10px;
left: 10px;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.5, 0.2, 0, 1);
}
.cj-disc .list {
width: 440px;
height: 440px;
border-radius: 50%;
position: absolute;
left: 10px;
top: 10px;
/* background-color: #007bff; */
overflow: hidden;
box-shadow: 0 0 3px 1px #333;
}
.cj-disc .center {
width: 0px;
height: 0px;
position: absolute;
left: 220px;
top: 220px;
}
.cj-disc .list .item {
position: absolute;
width: 0px;
height: 0px;
top: -220px;
border-color: transparent;
border-style: solid;
border-width: 220px;
/* transform-origin: 0px 0px; */
/* transform: rotate(5deg); */
}
.item:nth-child(odd) {
border-top-color: #ff814f !important;
}
.item:nth-child(even) {
border-top-color: #ffec89 !important;
}
.item p {
position: absolute;
top: -215px;
line-height: 17px;
font-size: 16px;
left: -7.5px;
}
.pointer {
width: 60px;
height: 60px;
position: absolute;
border-radius: 50%;
top: 220px;
left: 220px;
z-index: 1;
background-color: #ff5959;
box-shadow: 0 3px 5px 1px #333;
}
.before {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
border-radius: 50%;
background-color: #ff5959;
text-align: center;
cursor: pointer;
}
.before:hover p {
text-shadow: 0 0 10px #ffec89;
}
.before p {
cursor: pointer;
line-height: 16px;
color: #ffec89;
}
.before p:nth-child(1) {
margin-top: 13px;
}
.pointer .line {
width: 120px;
position: relative;
height: 10px;
background-color: #ff5959;
margin-top: 25px;
margin-left: 50px;
box-shadow: 0 3px 5px 1px #333;
}
.line-before {
width: 100%;
height: 100%;
position: ab.........完整代码请登录后点击上方下载按钮下载查看
网友评论0