zepto实现手机端摇一摇领红包优惠券抽奖效果代码-html代码-BFW代码库

zepto实现手机端摇一摇领红包优惠券抽奖效果代码

代码语言：html

所属分类：红包

代码描述：zepto实现手机端摇一摇领红包优惠券抽奖效果代码

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

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <style>
        /***************************************************//*					web·唐明明 			           *//***************************************************/* {
    	margin:0;
    	padding:0;
    }
    body {
    	color:#fff;
    	font-size:14px;
    	font-size:"微软雅黑";
    }
    /*红包*/.red_bg {
    	background-image:url(//repo.bfw.wiki/bfwrepo/images/game/yaoyao/red-bg.png);
    	position:absolute;
    	height:100%;
    	width:100%;
    	background-size:30px;
    }
    .red_bg>div.red-ts {
    	background:url(//repo.bfw.wiki/bfwrepo/images/game/yaoyao/red-ts.png);
    	background-repeat:no-repeat;
    	width:100%;
    	height:80px;
    	background-size:200px;
    	background-position:center;
    	margin-top:5%;
    }
    .red_bg>div.red-ss-bg {
    	height:260px;
    	width:260px;
    	margin:20px auto;
    	background:#fff;
    	position:relative;
    	border-radius:100%;
    }
    .red_bg>div.red-ss-bg::after {
    	content:' ';
    	width:101%;
    	height:101%;
    	position:absolute;
    	top:-0.5%;
    	left:-0.5%;
    	background:url(//repo.bfw.wiki/bfwrepo/images/game/yaoyao/red-ss-bg.png);
    	background-size:cover;
    }
    .red_bg>div.red-ss-bg>span {
    	background:url(//repo.bfw.wiki/bfwrepo/images/game/yaoyao/red-ss.png);
    	width:100%;
    	height:100%;
    	position:absolute;
    	background-size:60%;
    	background-position:40% 80%;
    	background-repeat:no-repeat;
    	display:inline-block;
    }
    .red_bg>div.red-jh {
    	width:60%;
    	font-size:16px;
    	border-radius:30px;
    	height:40px;
    	line-height:40px;
    	background:rgba(0,0,0,0.45);
    	text-align:center;
    	margin:0px auto;
    }
    .red_bg>div.red-jh>span {
    	color:#f3f125;
    	padding:0px 5px;
    }
    /*提示信息*/.red-tc {
    	background:rgba(0,0,0,0.85);
    	position:absolute;
    	width:calc( 100% - 80px );
    	padding:0px 40px;
    	height:100%;
    	top:0;
    	display:none;
    }
    .red-yzj>.red-tc-k,.red-tc-btn {
    	width:calc( 100% - 40px );
    	padding:20px;
    	background-repeat:no-repeat;
    }
    .red-yzj>.red-tc-k {
    	background:url(//repo.bfw.wiki/bfwrepo/images/game/yaoyao/red-zj-bg.png);
    	background-size:100%;
    	margin-top:40%;
    	text-align:center;
    	font-size:16px;
    }
    .red-yzj>.red-tc-k>img {
    	width:50%;
    	display:block;
    	margin:0 auto;
    	padding-bottom:10px;
    }
    .red-yzj>.red-tc-k>p {
    	font-size:20px;
    	padding-bottom:10px;
    }
    .red-yzj>.red-tc-k>p>span {
    	font-size:34px;
    	padding:0px 5px;
    }
    .red-yzj>.red-tc-btn {
    	background:url(//repo.bfw.wiki/bfwrepo/images/game/yaoyao/red-btn-bg.png);
    	background-size:100%;
    }
    .red-yzj>.red-tc-btn>button {
    	width:100%;
    	background:#ff0006;
    	border-radius:5px;
    	border:none;
    	line-height:40px;
    	font-size:18px;
    	color:#fff;
    }
    </style>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.3.5.1.css">
    <script type="text/javascript" s.........完整代码请登录后点击上方下载按钮下载查看