css布局实现一个手机端移动端大转盘抽奖效果代码-html代码-BFW代码库

css布局实现一个手机端移动端大转盘抽奖效果代码

代码语言：html

所属分类：大转盘

代码描述：css布局实现一个手机端移动端大转盘抽奖效果代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        .rotary_box {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: #000;
            opacity: 0.6;
            filter: alpha(opacity=50);
            z-index: 2147483646;
            display: none;
        }
        .rotary_fuzhu {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            position: absolute;
            left: 0;
            top: 0;
            cursor: pointer;
            z-index: 2147483646;
            display: none;
        }
        .rotary_wrap {
            height:600px;
            width: 350px;

            background-image: url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/rotary_wrap.png);
            background-position: center;
            background-size: 100% auto;
            background-repeat: no-repeat;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 2147483647;
            display: none;
        }
        .rotary_wrap .looper_close {
            width: 22px;
            height: 22px;
            background-image: url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/close.png);
            background-position: center;
            background-size: 100% auto;
            background-repeat: no-repeat;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
        }
        .rotaryArrow {
            width: 103px;
            left:  calc( 50% - 51px);
             top: calc( 50% - 42px);
            height: 152px;
            background-image: url(//repo.bfw.wiki/bfwrepo/images/zhuanpan/start.png);
            background-repeat: no-repeat;
            background-size: 100% auto;
            background-position: center center;
            position: absolute;

            cursor: pointer;
        }
        .result {

            background: rgba(0,0,0,0.75);
            border-radius: 3px;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            display: none;
        }
        .result .top_rotary {
            width: 100%;
            height: 28px;
            overflow: hidden;
        }
        .resul.........完整代码请登录后点击上方下载按钮下载查看