jquery答题卡切换式答题问卷调查小卡片效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery答题卡切换式答题问卷调查小卡片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="format-detection" content="telephone=no" /><meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <meta name="description" content=""><meta name="keywords" content=""> <style> body { line-height: 1; color: #333; width: 100%; margin: 0 auto; -webkit-text-size-adjust: none; overflow-x: hidden } p,ol,ul,li { list-style: none } a,span { line-height: 1; color: #333; text-decoration: none } button { outline: 0 } label { font-weight: normal } img { width: 100%; display: block } a img { word-break: break-all; word-wrap: break-word } a:hover,a:focus { text-decoration: none } :focus { outline: 0 } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-text-size-adjust: none } html,body { padding: 0; margin: 0 auto; height: 100%; font-size: 15px; max-width: 400px } * { -webkit-appearance: none; margin: 0; padding: 0 } a, span { color: inherit; line-height: inherit; text-decoration: none } img { width: auto } input { outline: none; } /** * CSS3 答题卡翻页效果 jQuery Transit * @authors Candice <286556658@qq.com> * @date 2016-9-27 15:30:18 * @version v1.0.8 */.wrapper { width: 100%; margin: 0 auto; } .card_wrap { width: 400px; height: 584px; position: relative; overflow: hidden; display: none } .card_cont { width: 100%; height: 530px; box-sizing: border-box; margin: 0 auto; position: absolute; background: url(//repo.bfw.wiki/bfwrepo/image/60fbeacc0e6d4.png) no-repeat center top; background-size: 100% auto; padding: 8px 20px 18px; transition: all ease .5s; -webkit-transition: all ease .5s; -moz-transition: all ease .5s; -ms-transition: all ease .5s; transform: scale(0,0); -moz-transform: scale(0,0); -ms-transform: scale(0,0); -o-transform: scale(0,0); -webkit-transform: scale(0,0); bottom: 0; display: none; } .card { width: 320px; height: 100%; position: relative; margin: 0 auto; padding: 0 18px; } .card .card_bottom { width: 100%; position: absolute; bottom: 28px; left: 0; box-sizing: border-box; padding: 0 28px } .card .card_bottom a { color: #c733c5; cursor: pointer } .card .card_bottom span { float: right; color: #909090 } .card .card_bottom span b { color: #666; font-weight: inherit } .card_cont.card1 { display: block; transform: scale(1,1) translate(0,0) !important; -ms-transform: scale(1,1) translate(0,0) !important; -moz-transform: scale(1,1) translate(0,0) !important; -webkit-transform: scale(1,1) translate(0,0) !important; } .card_cont.card2 { display: block; transform: scale(.85,.85) translate(0,-62px) !important; -ms-transform: scale(.85,.85) translate(0,-62px) !important; -moz-transform: scale(.85,.85) translate(0,-62px) !important; -webkit-transform: scale(.85,.85) translate(0,-62px) !important; } .card_cont.card3 { display: block; transform: scale(.72,.72) translate(0,-135px) !important; -ms-transform: scale(.72,.72) translate(0,-135px) !important; -moz-transform: scale(.72,.72) translate(0,-135px) !important; -webkit-transform: scale(.72,.72) translate(0,-135px) !important; } .card_cont.cardn { display: block; transform: translate(0,-1000px) !important; -moz-transform: translate(0,-1000px) !important; -ms-transform: translate(0,-1000px) !important; -webkit-transform: translate(0,-1000px) !important; } .question { display: table-cell; height: 80px; font-size: 16px; font-weight: 100; color: #fff; line-height: 1.4; vertical-align: middle; padding-left: 1em } .question span { margin-left: -1em } /*Radio Specific styles*/input[type='radio'] { display: none; cursor: pointer; } input[type='radio']:focus, input[type='radio']:active { outline: none; } input[type='radio'] + label { cursor: pointer; display: inline-block; position: relative; padding-left: 28px; color: #666; } input[type='radio']:checked + label { color: #c733c5 !important; } input[type='radio'] + label:before, input[type='radio'] + label:after { content: ''; font-family: helvetica; display: inline-block; width: 20px; height: 20px; left: 0; top: 0; text-align: center; position: absolute; } input[type='radio'] + label:before { background-color: transparent; } input[type='radio'] + label:after { color: #c733c5; } input[type='radio']:checked + label:before { -moz-box-shadow: inset 0 0 0 5px #fff; -webkit-box-shadow: inset 0 0 5px #fff; box-shadow: inset 0 0 0 5px #fff; border: 1px solid #c733c5; background-color: #c733c5; } input[type='radio'] + label:before { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 1px solid #c733c5; } input[type='radio'] + label:hover:after { color: #c733c5; } input[type='radio']:checked + label:after, input[type='radio']:checked + label:hover:after { color: #c733c5; } ul.select { margin-top: 30px } ul.select li { height: 46px; line-height: 1.5; margin: 0 0 20px 0 } </style> </head> <body style="background-color:#1fc587"> <div class="wrapper"> <div id="answer" class="card_wrap"> <!--Q1--><div class="card_cont card1"> <div class="card"> <p class="question"> <span>Q1、</span>以下哪项最能说明您的投资经验? </p> <ul class="select"> <li><input id="q1_1" type="radio" name="r-group-1"><label for="q1_1">除存款、国债外,我几乎不投资其他金融产品</label></li><li><input id="q1_2" type="radio" name="r-group-1"><label for="q1_2">大部分投资于外汇、国债等,较少投资于股票、基金等风险产品</label></li><li><input id="q1_3" type="radio" name="r-group-1"><label for="q1_3">资产均衡地分布于存款、国债、银行理财产品、信托产品、股票、基金等</label></li><li><input id="q1_4" type="radio" name="r-group-1"><label for="q1_4">大部分投资于股票、基金、外汇等高风险产品,较少投资于存款、国债</label></li><li><input id="q1_5" type="radio" name="r-group-1"><label for="q1_5">更倾向于互联网金融产品、更倾向于互联网金融产品</label></li> </ul> <div class="card_bottom"> <span><b>1</b>/9</span> </div> </div> </div> <!--Q2--><div class="card_cont card2"> <div class="card"> <p class="question"> <span>Q2、</span>以下哪项最能说明您的投资经验?您的投资经验 </p> <ul class="select"> <li><input id="q2_1" type="radio" name="r-group-2"><label for="q2_1">除存款、国债外,我几乎不投资其他金融产品</label></li><li><input id="q2_2" type="radio" name="r-group-2"><label for="q2_2">大部分投资于外汇、国债等,较少投资于股票、基金等风险产品</label></li><li><input id="q2_3" type="radio" name="r-group-2"><label for="q2_3">资产均衡地分布于存款、国债、银行理财产品、信托产品、股票、基金等</label></li><li><input id="q2_4" type="radio" name="r-group-2"><label for="q2_4">大部分投资于股票、基金、外汇等高风险产品,较少投资于存款、国债</label></li><li><input id="q2_5" type="radio" name="r-group-2"><label for="q2_5">更倾向于互联网金融产品更倾向于互联网金融产品</label></li> </ul> <div class="card_bottom"> <a class="prev">上一题</a><span><b>2</b>/9</span> </div> </div> </div> <!--Q3--><div class="card_cont card3"> <div class="card"> <p class="question"> <span>Q3、</span>以下哪项最能说明您的投资经验?您的投资经验 </p> <ul class="select"> <li><input id="q3_1" type="radio" name="r-group-3"><label for="q3_1">除存款、国债外,我几乎不投资其他金融产品</label></li><li><input id="q3_2" type="radio" name="r-group-3"><label for="q3_2">大部分投资于外汇、国债等,较少投资于股票、基金等风险产品</label></li><li><input id="q3_3" type="radio" name="r-group-3"><label for="q3_3">资产均衡地分布于存款、国债、银行理财产品、信托产品、股票、基金等</label></li><li><input id="q3_4" type="radio" name="r-group-3"><label for="q3_4">大部分投资于股票、基金、外汇等高风险产品,较少投资于存款、国债</label></li><li><input id="q3_5" type="radio" name="r-group-3"><label for="q3_5">更倾向于互联网金融产品</label></li> </ul> <div class="card_bottom"> <a class="prev">上一题</a><span><b>3</b>/9</span> </div> </div> </div> <!--Q4--><div class="card_cont"> <div class="card"> <p class="question"> <span>Q4、</span>以下哪项最能说明您的投资经验? </p> <ul class="select"> <li><input id="q4_1" type="radio" name="r-group-4"><label for="q4_1">除存款、国债外,我几乎不投资其他金融产品</label></li><li><input id="q4_2" type="radio" name="r-group-4"><label for="q4_2">大部分投资于外汇、国债等,较少投资于股票、基金等风险产品</label></li><li><input id="q4_3" type="radio" .........完整代码请登录后点击上方下载按钮下载查看
网友评论0