jquery实现一个大转盘抽奖代码

代码语言:html

所属分类:大转盘

代码描述:jquery实现一个大转盘抽奖代码

代码标签: 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