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

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

代码语言：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) {.........完整代码请登录后点击上方下载按钮下载查看