jquery+css3问卷答题卡翻页动画效果示例 - Web前端
作者：98wpeu发布时间：2026-08-12分类：网页前端技术浏览：2
导读：css3+JQuery制作立体翻页时间展示动画特效。该翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用。这个选项调查的特效以选项卡的形式，每答完一道题目自动切换到下...
css3+JQuery制作立体翻页时间展示动画特效。该翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用。
这个选项调查的特效以选项卡的形式，每答完一道题目自动切换到下一条，颇具特色。使用jQuery和CSS3，适合html5浏览器。
代码如下：
<!DOCtype html>
<HTML>
<head>
<meta charset="utf-8">
<meta http-eqUIv="X-UA-Compatible" content="ie=Edge,Chrome=1">
<title>jquery+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="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>
<body style="background-color:#1fc587">
<div class="wrapper">
<br />
<h2>JQuery+CSS3翻页效果的调查答题卡</h2>
<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">javascript</label>
</li>
<li>
<input id="q1_2" type="radio" name="r-group-1">
<label for="q1_2">C语言</label>
</li>
<li>
<input id="q1_3" type="radio" name="r-group-1">
<label for="q1_3">java</label>
</li>
<li>
<input id="q1_4" type="radio" name="r-group-1">
<label for="q1_4">c#</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>/5</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">web前端</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">iOS软件开发</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>/5</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">何问起（http://hovertree.com/）</label>
</li>
<li>
<input id="q3_2" type="radio" name="r-group-3">
<label for="q3_2">博客园（http://www.cnblogs.com/）</label>
</li>
<li>
<input id="q3_3" type="radio" name="r-group-3">
<label for="q3_3">柯乐义（http://keleyi.com/）</label>
</li>
<li>
<input id="q3_4" type="radio" name="r-group-3">
<label for="q3_4">CSDN（http://www.csdn.net/）</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>/5</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">Windows 10</label>
</li>
<li>
<input id="q4_2" type="radio" name="r-group-4">
<label for="q4_2">Windows 7</label>
</li>
<li>
<input id="q4_3" type="radio" name="r-group-4">
<label for="q4_3">linux</label>
</li>
<li>
<input id="q4_4" type="radio" name="r-group-4">
<label for="q4_4">Mac OS</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>/5</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">网页特效 http://hovertree.com/menu/texiao/ </label>
</li>
<li>
<input id="q5_2" type="radio" name="r-group-5">
<label for="q5_2">在线题库 http://hovertree.com/tiku/ </label>
</li>
<li>
<input id="q5_3" type="radio" name="r-group-5">
<label for="q5_3">jQuery下载 http://hovertree.com/h/bjaf/ati6k7yk.htm</label>
</li>
<li>
<input id="q5_4" type="radio" name="r-group-5">
<label for="q5_4">图片 http://hovertree.com/hvtimg/ </label>
</li>
<li>
<input id="q5_5" type="radio" name="r-group-5">
<label for="q5_5">代码 http://hovertree.com/code/ </label>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a><span><b>5</b>/5</span></div>
</div>
</div>
<!--6-->
<div class="card_cont">
<div class="card">
<p class="question"></p>
<ul class="select">
<li>感谢您的参与！<br />
更多信息请访问何问起网。
<br />
<a href="http://hovertree.com" target="_blank">何问起首页</a>
</li>
</ul>
<div class="card_bottom"><a class="prev">上一题</a></div>
</div>
</div>
</div><!--/card_wrap-->
<br /><br />
<div style="text-align:center;">
<a href="http://hovertree.com">首页</a>
<a href="http://hovertree.com/texiao/">特效库</a>
<a href="http://hovertree.com/h/bjaf/ml26ksm5.htm">原文</a>
</div>
</div>
<script src="http://down.hovertree.com/jquery/jquery-1.8.3.min.JS"></script>
<script src="http://hovertree.com/texiao/jquery/87/hovertreeanswer.js"></script>
<script>
$(function(){
$("#answer").answerSheet({});
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
- 上一篇：jQuery Validate验证框架详解(推荐) - Web前端
- 下一篇：已经是最后一篇了
相关推荐
- Jquery组件easyUi实现表单验证示例 - Web前端
- jQuery实现的图片轮播效果完整示例 - Web前端
- Jquery组件easyUi实现表单验证示例 - Web前端
- 基于jQuery的Web上传插件Uploadify使用示例 - Web前端
- 基于jQuery实现仿百度首页选项卡切换效果 - Web前端
- 基于JQuery实现图片轮播效果(焦点图) - Web前端
- jQuery+jsp实现省市县三级联动效果(附源码) - Web前端
- 基于jquery实现鼠标滚轮驱动的图片切换效果 - Web前端
- jQuery实现的网页换肤效果示例 - Web前端
- jQuery 1.9.1源码分析系列（十五)之动画处理 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 5【第六章】Foundation之按钮和下拉功能 - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 9在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性