jquery+css实现一个无图片文字大转盘效果代码-html代码-BFW代码库

代码语言：html

所属分类：大转盘

代码描述：jquery+css实现一个无图片大转盘效果代码，没有一张图片，全部使用css布局页面结合文字奖项设置完成。

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

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

<head>
    <meta charset="UTF-8">
    <style>
        body {
        	background:#cff
        }
        .zhu {
        	position:fixed;
        	top:calc(50% - 250px);
        	left:calc(50% - 250px);
        	width:500px;
        	height:500px;
        	background:#cff
        }
        .zhu .pan {
        	position:absolute;
        	top:calc(50% - 200px);
        	left:calc(50% - 200px);
        	width:400px;
        	height:400px
        }
        .zhu .pan .wai {
        	width:100%;
        	height:100%;
        	border-radius:100%;
        	background:#fdc081
        }
        .zhu .pan .wai::before {
        	content:'';
        	display:block;
        	width:86%;
        	height:86%;
        	border-radius:100%;
        	position:absolute;
        	top:7%;
        	left:7%;
        	background-color:#fff
        }
        .zhu .pan .wai span {
        	display:block;
        	width:100%;
        	height:100%;
        	position:absolute;
        	top:0;
        	left:0
        }
        .zhu .pan .wai span::before {
        	content:'';
        	display:block;
        	width:16px;
        	height:16px;
        	border-radius:100%;
        	position:absolute;
        	top:6px;
        	left:calc(50% - 8px)
        }
        .zhu .pan .wai span:nth-child(2) {
        	transform:rotate(15deg)
        }
        .zhu .pan .wai span:nth-child(3) {
        	transform:rotate(30deg)
        }
        .zhu .pan .wai span:nth-child(4) {
        	transform:rotate(45deg)
        }
        .zhu .pan .wai span:nth-child(5) {
        	transform:rotate(60deg)
        }
        .zhu .pan .wai span:nth-child(6) {
        	transform:rotate(75deg)
        }
        .zhu .pan .wai span:nth-child(7) {
        	transform:rotate(90deg)
        }
        .zhu .pan .wai span:nth-child(8) {
        	transform:rotate(105deg)
        }
        .zhu .pan .wai span:nth-child(9) {
        	transform:rotate(120deg)
        }
        .zhu .pan .wai span:nth-child(10) {
        	transform:rotate(135deg)
        }
        .zhu .pan .wai span:nth-child(11) {
        	transform:rotate(150deg)
        }
        .zhu .pan .wai span:nth-child(12) {
        	transform:rotate(165deg)
        }
        .zhu .pan .wai span:nth-child(13) {
        	transform:rotate(180deg)
        }
        .zhu .pan .wai span:nth-child(14) {
        	transform:rotate(195deg)
        }
        .zhu .pan .wai span:nth-child(15) {
        	transform:rotate(210deg)
        }
        .zhu .pan .wai span:nth-child(16) {
        	transform:rotate(225deg)
        }
        .zhu .pan .wai span:nth-child(17) {
        	transform:rotate(240deg)
        }
        .zhu .pan .wai span:nth-child(18) {
        	transform:rotate(255deg)
        }
        .zhu .pan .wai span:nth-child(19) {
        	transform:rotate(270deg)
        }
        .zhu .pan .wai span:nth-child(20) {
        	transform:rotate(285deg)
        }
        .zhu .pan .wai span:nth-child(21) {
        	transform:rotate(300deg)
        }
        .zhu .pan .wai span:nth-child(22) {
        	transform:rotate(315deg)
        }
        .zhu .pan .wai span:nth-child(23) {
        	transform:rotate(330deg)
        }
        .zhu .pan .wai span:nth-child(24) {
        	transform:rotate(345deg)
        }
        .zhu .pan .wai span:nth-child(2n)::before {
        	width:14px;
        	height:14px
        }
        .zhu .pan .wai span:nth-child(4n)::before {
        	background-color:#7c83f8
        }
        .zhu .pan .wai span:nth-child(4n-1)::before {
        	background-color:#7efffd
        }
        .zhu .pan .wai span:nth-child(4n-2)::before {
        	background-color:#fe7d00
        }
        .zhu .pan .wai span:nth-child(4n-3)::before {
        	background-color:#e3ff2f
        }
        .xuanxiang {
        	width:80%;
        	height:80%;
        	background-color:#fff;
        	position:absolute;
        	top:10%;
        	left:10%;
        	border-radius:100%;
        	overflow:hidden;
        	transform:
        }
        .xuanxiang::after {
        	content:'';
        	display:block;
        	width:50%;
        	height:50%;
        	background-color:#fff;
        	position:absolute;
        	top:25%;
        	left:25%;
        	border-radius:100%;
        	overflow:hidden
        }
        .xuanxiang span {
        	width:100%;
        	height:100%;
        	position:absolute;
        	top:0;
        	left:0
        }
        .xuanxiang span::before {
        	content:'';
        	display:block;
        	width:0;
        	border:40px solid transparent;
        	border-top-width:160px;
        	border-top-style:solid;
        	position:absolute;
        	left:calc(50% - 40px)
        }
        .xuanxiang span:nth-child(2) {
        	transform:rotate(30deg)
        }
        .xuanxiang span:nth-child(3) {
        	transform:rotate(60deg)
        }
        .xuanxiang span:nth-child(4) {
        	transform:rotate(90deg)
        }
        .xuanxiang span:nth-child(5) {
        	transform:rotate(120deg)
        }
        .xuanxiang span:nth-child(6) {
        	transform:rotate(150deg)
        }
        .xuanxiang span:nth-child(7) {
        	transform:rotate(180deg)
        }
        .xuanxiang span:nth-child(8) {
        	transform:rotate(210deg)
        }
        .xuanxiang span:nth-child(9) {
        	transform:rotate(240deg)
       .........完整代码请登录后点击上方下载按钮下载查看