zepto实现手机端摇一摇领红包优惠券抽奖效果代码
代码语言:html
所属分类:红包
代码描述:zepto实现手机端摇一摇领红包优惠券抽奖效果代码
代码标签: 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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0