jquery+css3问卷答题卡翻页动画效果示例
CSS3+jQuery制作立体翻页时间展示动画特效。该翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用。
这个选项调查的特效以选项卡的形式，每答完一道题目自动切换到下一条，颇具特色。使用jQuery和CSS3，适合HTML5浏览器。
代码如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<title>jQuery+CSS3答题卡翻页效果_何问起</title>
<metaname="format-detection"content="telephone=no"/>
<metaname="apple-mobile-web-app-capable"content="yes"/>
<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<metaname="description"content="何问起">
<metaname="keywords"content="何问起">
<linkhref="http://hovertree.com/texiao/jquery/87/hovertreeanswer.css"rel="stylesheet"/>
<style>h2{color:white;text-align:center;}a{color:deeppink;font-size:16px;}</style>
</head>
<bodystyle="background-color:#1fc587">
<divclass="wrapper">
<br/>
<h2>jQuery+CSS3翻页效果的调查答题卡</h2>
<divid="answer"class="card_wrap">
<!--Q1-->
<divclass="card_contcard1">
<divclass="card">
<pclass="question"><span>Q1、</span>你第一门接触的编程语言是？</p>
<ulclass="select">
<li>
<inputid="q1_1"type="radio"name="r-group-1">
<labelfor="q1_1">JavaScript</label>
</li>
<li>
<inputid="q1_2"type="radio"name="r-group-1">
<labelfor="q1_2">C语言</label>
</li>
<li>
<inputid="q1_3"type="radio"name="r-group-1">
<labelfor="q1_3">Java</label>
</li>
<li>
<inputid="q1_4"type="radio"name="r-group-1">
<labelfor="q1_4">C#</label>
</li>
<li>
<inputid="q1_5"type="radio"name="r-group-1">
<labelfor="q1_5">其他</label>
</li>
</ul>
<divclass="card_bottom"><span><b>1</b>/5</span></div>
</div>
</div>
<!--Q2-->
<divclass="card_contcard2">
<divclass="card">
<pclass="question"><span>Q2、</span>你主要从事的开发设计工作是？</p>
<ulclass="select">
<li>
<inputid="q2_1"type="radio"name="r-group-2">
<labelfor="q2_1">Web前端</label>
</li>
<li>
<inputid="q2_2"type="radio"name="r-group-2">
<labelfor="q2_2">安卓软件开发</label>
</li>
<li>
<inputid="q2_3"type="radio"name="r-group-2">
<labelfor="q2_3">IOS软件开发</label>
</li>
<li>
<inputid="q2_4"type="radio"name="r-group-2">
<labelfor="q2_4">网站、软件维护</label>
</li>
<li>
<inputid="q2_5"type="radio"name="r-group-2">
<labelfor="q2_5">数据库开发管理</label>
</li>
</ul>
<divclass="card_bottom"><aclass="prev">上一题</a><span><b>2</b>/5</span></div>
</div>
</div>
<!--Q3-->
<divclass="card_contcard3">
<divclass="card">
<pclass="question"><span>Q3、</span>你最早知道的有关开发的网站是哪个？</p>
<ulclass="select">
<li>
<inputid="q3_1"type="radio"name="r-group-3">
<labelfor="q3_1">何问起（http://hovertree.com/）</label>
</li>
<li>
<inputid="q3_2"type="radio"name="r-group-3">
<labelfor="q3_2">博客园（http://www.cnblogs.com/）</label>
</li>
<li>
<inputid="q3_3"type="radio"name="r-group-3">
<labelfor="q3_3">柯乐义（http://keleyi.com/）</label>
</li>
<li>
<inputid="q3_4"type="radio"name="r-group-3">
<labelfor="q3_4">CSDN（http://www.csdn.net/）</label>
</li>
<li>
<inputid="q3_5"type="radio"name="r-group-3">
<labelfor="q3_5">其他</label>
</li>
</ul>
<divclass="card_bottom"><aclass="prev">上一题</a><span><b>3</b>/5</span></div>
</div>
</div>
<!--Q4-->
<divclass="card_cont">
<divclass="card">
<pclass="question"><span>Q4、</span>你开发中使用的主要操作系统是？</p>
<ulclass="select">
<li>
<inputid="q4_1"type="radio"name="r-group-4">
<labelfor="q4_1">Windows10</label>
</li>
<li>
<inputid="q4_2"type="radio"name="r-group-4">
<labelfor="q4_2">Windows7</label>
</li>
<li>
<inputid="q4_3"type="radio"name="r-group-4">
<labelfor="q4_3">Linux</label>
</li>
<li>
<inputid="q4_4"type="radio"name="r-group-4">
<labelfor="q4_4">MacOS</label>
</li>
<li>
<inputid="q4_5"type="radio"name="r-group-4">
<labelfor="q4_5">其他</label>
</li>
</ul>
<divclass="card_bottom"><aclass="prev">上一题</a><span><b>4</b>/5</span></div>
</div>
</div>
<!--Q5-->
<divclass="card_cont">
<divclass="card">
<pclass="question"><span>Q5、</span>你觉得下面哪个栏目最实用？</p>
<ulclass="select">
<li>
<inputid="q5_1"type="radio"name="r-group-5">
<labelfor="q5_1">网页特效http://hovertree.com/menu/texiao/</label>
</li>
<li>
<inputid="q5_2"type="radio"name="r-group-5">
<labelfor="q5_2">在线题库http://hovertree.com/tiku/</label>
</li>
<li>
<inputid="q5_3"type="radio"name="r-group-5">
<labelfor="q5_3">jQuery下载http://hovertree.com/h/bjaf/ati6k7yk.htm</label>
</li>
<li>
<inputid="q5_4"type="radio"name="r-group-5">
<labelfor="q5_4">图片http://hovertree.com/hvtimg/</label>
</li>
<li>
<inputid="q5_5"type="radio"name="r-group-5">
<labelfor="q5_5">代码http://hovertree.com/code/</label>
</li>
</ul>
<divclass="card_bottom"><aclass="prev">上一题</a><span><b>5</b>/5</span></div>
</div>
</div>
<!--6-->
<divclass="card_cont">
<divclass="card">
<pclass="question"></p>
<ulclass="select">
<li>感谢您的参与！<br/>
更多信息请访问何问起网。
<br/>
<ahref="http://hovertree.com"target="_blank">何问起首页</a>
</li>
</ul>
<divclass="card_bottom"><aclass="prev">上一题</a></div>
</div>
</div>
</div><!--/card_wrap-->
<br/><br/>
<divstyle="text-align:center;">
<ahref="http://hovertree.com">首页</a>
<ahref="http://hovertree.com/texiao/">特效库</a>
<ahref="http://hovertree.com/h/bjaf/ml26ksm5.htm">原文</a>
</div>
</div>
<scriptsrc="http://down.hovertree.com/jquery/jquery-1.8.3.min.js"></script>
<scriptsrc="http://hovertree.com/texiao/jquery/87/hovertreeanswer.js"></script>
<script>
$(function(){
$("#answer").answerSheet({});
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。