以下是 CSS3实现答题卡翻页切换特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS3实现答题卡翻页切换特效</title>
<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="">
<link href="risk_test.css" rel="stylesheet" />
</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" name="r-group-4">
<label for="q4_3">资产均衡地分布于存款、国债、银行理财产品、信托产品、股票、基金等</label>
</li>
<li>
<input id="q4_4" type="radio" name="r-group-4">
<label for="q4_4">大部分投资于股票、基金、外汇等高风险产品，较少投资于存款、国债 </label>
</li>
<li>
<input id="q4_5" type="radio" name="r-group-4">
<label for="q4_5">更倾向于互联网金融产品</label>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a><span><b>4</b>/9</span></div>
</div>
</div>
<!--Q5-->
<div class="card_cont">
<div class="card">
<p class="question"><span>Q5、</span>以下哪项最能说明您的投资经验？</p>
<ul class="select">
<li>
<input id="q5_1" type="radio" name="r-group-5">
<label for="q5_1">除存款、国债外,我几乎不投资其他金融产品</label>
</li>
<li>
<input id="q5_2" type="radio" name="r-group-5">
<label for="q5_2">大部分投资于外汇、国债等，较少投资于股票、基金等风险产品</label>
</li>
<li>
<input id="q5_3" type="radio" name="r-group-5">
<label for="q5_3">资产均衡地分布于存款、国债、银行理财产品、信托产品、股票、基金等</label>
</li>
<li>
<input id="q5_4" type="radio" name="r-group-5">
<label for="q5_4">大部分投资于股票、基金、外汇等高风险产品，较少投资于存款、国债 </label>
</li>
<li>
<input id="q5_5" type="radio" name="r-group-5">
<label for="q5_5">更倾向于互联网金融产品</label>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a><span><b>5</b>/9</span></div>
</div>
</div>
<!--Q6-->
<div class="card_cont">
<div class="card">
<p class="question"><span>Q6、</span>以下哪项最能说明您的投资经验？</p>
<ul class="select">
<li>
<input id="q6_1" type="radio" name="r-group-6" >
<label for="q6_1">除存款、国债外,我几乎不投资其他金融产品</label>
</li>
<li>
<input id="q6_2" type="radio" name="r-group-6">
<label for="q6_2">大部分投资于外汇、国债等，较少投资于股票、基金等风险产品</label>
</li>
<li>
<input id="q6_3" type="radio" name="r-group-6">
<label for="q6_3">资产均衡地分布于存款、国债、银行理财产品、信托产品、股票、基金等</label>
</li>
<li>
<input id="q6_4" type="radio" name="r-group-6">
<label for="q6_4">大部分投资于股票、基金、外汇等高风险产品，较少投资于存款、国债 </label>
</li>
<li>
<input id="q6_5" type="radio" name="r-group-6">
<label for="q6_5">更倾向于互联网金融产品</label>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a><span><b>6</b>/9</span></div>
</div>
</div>
<!--Q7-->
<div class="card_cont">
<div class="card">
<p class="question"><span>Q7、</span>以下哪项最能说明您的投资经验？</p>
<ul class="select">
<li>
<input id="q7_1" type="radio" name="r-group-7">
<label for="q7_1">除存款、国债外,我几乎不投资其他金融产品</label>
</li>
<li>
<input id="q7_2" type="radio" name="r-group-7">
<label for="q7_2">大部分投资于外汇、国债等，较少投资于股票、基金等风险产品</label>
</li>
<li>
<input id="q7_3" type="radio" name="r-group-7">
<label for="q7_3">资产均衡地分布于存款、国债、银行理财产品、信托产品、股票、基金等</label>
</li>
<li>
<input id="q7_4" type="radio" name="r-group-7">
<label for="q7_4">大部分投资于股票、基金、外汇等高风险产品，较少投资于存款、国债 </label>
</li>
<li>
<input id="q7_5" type="radio" name="r-group-7">
<label for="q7_5">更倾向于互联网金融产品、更倾向于互联网金融产品</label>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a><span><b>7</b>/9</span></div>
</div>
</div>
<!--Q8-->
<div class="card_cont">
<div class="card">
<p class="question"><span>Q8、</span>以下哪项最能说明您的投资经验？</p>
<ul class="select">
<li>
<input id="q8_1" type="radio" name="r-group-8">
<label for="q8_1">除存款、国债外,我几乎不投资其他金融产品</label>
</li>
<li>
<input id="q8_2" type="radio" name="r-group-8">
<label for="q8_2">大部分投资于外汇、国债等，较少投资于股票、基金等风险产品</label>
</li>
<li>
<input id="q8_3" type="radio" name="r-group-8">
<label for="q8_3">资产均衡地分布于存款、国债、银行理财产品、信托产品、股票、基金等</label>
</li>
<li>
<input id="q8_4" type="radio" name="r-group-8">
<label for="q8_4">大部分投资于股票、基金、外汇等高风险产品，较少投资于存款、国债 </label>
</li>
<li>
<input id="q8_5" type="radio" name="r-group-8">
<label for="q8_5">更倾向于互联网金融产品</label>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a><span><b>8</b>/9</span></div>
</div>
</div>
<!--Q9-->
<div class="card_cont">
<div class="card">
<p class="question"><span>Q9、</span>您投资产品的价值出现何种程度的波动时，您会呈现明显的焦虑？</p>
<ul class="select">
<li>
<input id="q9_1" type="radio" name="r-group-9" >
<label for="q9_1">除存款、国债外,我几乎不投资其他金融产品</label>
</li>
<li>
<input id="q9_2" type="radio" name="r-group-9">
<label for="q9_2">大部分投资于外汇、国债等，较少投资于股票、基金等风险产品</label>
</li>
<li>
<input id="q9_3" type="radio" name="r-group-9">
<label for="q9_3">资产均衡地分布于存款、国债、银行理财产品、信托产品、股票、基金等</label>
</li>
<li>
<input id="q9_4" type="radio" name="r-group-9">
<label for="q9_4">大部分投资于股票、基金、外汇等高风险产品，较少投资于存款、国债 </label>
</li>
<li>
<input id="q9_5" type="radio" name="r-group-9">
<label for="q9_5">更倾向于互联网金融产品</label>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a><span><b>9</b>/9</span></div>
</div>
</div>
</div><!--/card_wrap-->
</div>
<script src="jquery-1.8.3.min.js"></script>
<script src="answer.js"></script>
<script>
$(function(){
$("#answer").answerSheet({});
})
</script>
</body>
</html>
JS代码(answer.js):
/** * CSS3 答题卡翻页效果 jQuery Transit * @authors Candice <286556658@qq.com> * @date 2016-9-27 15:30:18 * @version 1.0.8 */
$.fn.answerSheet = function(options){
var defaults={
mold:'card',}
;
var opts = $.extend({
}
,defaults,options);
return $(this).each(function(){
var obj = $(this).find('.card_cont');
var _length = obj.length,_b = _length -1,_len = _length - 1,_cont = '.card_cont';
for(var a = 1;
a <= _length;
a++){
obj.eq(_b).css({
'z-index':a}
);
_b-=1;
}
$(this).show();
if(opts.mold == 'card'){
obj.find('ul li label').click(function(){
var _idx = $(this).parents(_cont).index(),_cards = obj,_cardcont = $(this).parents(_cont);
if(_idx == _len){
return;
}
else{
setTimeout(function(){
_cardcont.addClass('cardn');
setTimeout(function(){
_cards.eq(_idx + 3).addClass('card3');
_cards.eq(_idx + 2).removeClass('card3').addClass('card2');
_cards.eq(_idx + 1).removeClass('card2').addClass('card1');
_cardcont.removeClass('card1');
}
,200);
}
,100);
}
}
);
$('.card_bottom').find('.prev').click(function(){
var _idx = $(this).parents(_cont).index(),_cardcont = $(this).parents(_cont);
obj.eq(_idx + 2).removeClass('card3').removeClass('cardn');
obj.eq(_idx + 1).removeClass('card2').removeClass('cardn').addClass('card3');
obj.eq(_idx).removeClass('card1').removeClass('cardn').addClass('card2');
setTimeout(function(){
obj.eq(_idx - 1).addClass('card1').removeClass('cardn');
}
,200);
}
)}
}
);
}
;
CSS代码(risk_test.css):
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(test_card_bg.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}
分享到QQ
分享到微博
微信扫一扫
