这个选项调查的特效以选项卡的形式，每答完一道题目自动切换到下一条，颇具特色。使用jQuery和CSS3，适合HTML5浏览器。

效果展示 http://hovertree.com/texiao/jquery/87/

源码下载：
http://hovertree.com/h/bjaf/sym1l16q.htm

效果图如下：

代码如下：

<!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>

            <!---->

            <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>

转自：http://hovertree.com/h/bjaf/ml26ksm5.htm

特效推荐：http://www.cnblogs.com/jihua/p/webfront.html

jquery css3问卷答题卡翻页动画效果的更多相关文章

  1. css3 --- 翻页动画 --- javascript --- 3d --- Action

    用css3和javascript做一个翻页动画<Action> 如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_Car ...

  2. css3 --- 翻页动画 --- javascript --- 3d --- 准备

    用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transi ...

  3. 6个超炫酷的HTML5电子书翻页动画

    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...

  4. 通过js实现整屏滑动+全屏翻页+动画展示+线性图

    技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js   概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...

  5. jquery 实现智能炫酷的翻页相册效果

    jquery 实现智能炫酷的翻页相册效果巧妙的运用 Html 的文档属性,大大减少jquery 的代码量,实现了智能炫酷的翻页相册.兼容性很好,实现了代码与标签的完全分离​1. [代码]jquery ...

  6. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  7. 基于jQuery在线问卷答题系统代码

    分享一款基于jQuery在线问卷答题系统代码是一款实用的jQuery答题插件,点击下一题切换带有淡入淡出效果.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. flex布局构建大屏框架并支持翻页动画、滚动表格功能

      本文将利用flex属性构建大屏可视化界面.界面主要分标题栏.工具栏.数据可视化窗口.其中,翻页动画以及滚动表格功能分别分布在数据可视化界面两侧. 鼠标点击标题,可看到左侧窗口翻转动画: 整体布局效 ...

  9. 创意HTML5文字特效 类似翻页的效果

    原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...

随机推荐

  1. OpenWrt中开启usb存储和samba服务

    在从官网安装的WNDR3800 15.05.1版本OpenWrt中, 不带usb存储支持以及samba, 需要另外安装 1. 启用usb支持 USB Basic Support https://wik ...

  2. ASP.NET 5运行时升级到Beta5

    在Visual Studio 2015 RTM和Windows 10正式发布之前,微软把开源.NET升级到了beta5,带来了一些增强和改变.和Visual Studio 2015 RC一起安装的AS ...

  3. 【UWP开源】图片编辑器，带贴图、滤镜、涂鸦等功能

    目录 说明 功能 实现原理 使用方法 效果截图 说明 最近空余时间研究了一下Win2D,它能为我们在UWP中提供一种类似GDI那样的绘图方法.就像传统Winform.MFC中那样重写OnPaint相关 ...

  4. 用Go实现的简易TCP通信框架

    接触到GO之后,GO的网络支持非常令人喜欢.GO实现了在语法层面上可以保持同步语义,但是却又没有牺牲太多性能,底层一样使用了IO路径复用,比如在LINUX下用了EPOLL,在WINDOWS下用了IOC ...

  5. C#开发奇技淫巧三：把dll放在不同的目录让你的程序更整洁

    系列文章 C#开发奇技淫巧一:调试windows系统服务 C#开发奇技淫巧二:根据dll文件加载C++或者Delphi插件 C#开发奇技淫巧三:把dll放在不同的目录让你的程序更整洁 程序目录的整理 ...

  6. 架构设计：一种远程调用服务的设计构思（zookeeper的一种应用实践）

    在深入学习zookeeper我想先给大家介绍一个和zookeeper相关的应用实例,我把这个实例命名为远程调用服务.通过对这种应用实例的描述,我们会对zookeeper应用场景会有深入的了解. 远程调 ...

  7. 3D游戏中的画质与效率适配

      哪里来的需求? 众所周知,由于不同的设备配置不同.导致其CPU和GPU处理能力有高有低.同样的游戏想要在所有设备上运行流畅且画面精美,是不可能的.这就需要我们针对不同的设备能力进行画质调节,以保证 ...

  8. android内部培训视频_第五节(1)_OA实战之登录界面

    第五节(1):OA实战之登录界面  一.登录界面布局 1.背景图片 2.文本框 3.checkbox 4.按钮 暂未实现点击切换图片效果 <RelativeLayout xmlns:androi ...

  9. vue-router2.0 组件之间传参及获取动态参数

    <li v-for=" el in hotLins" > <router-link :to="{path:'details',query: {id:el ...

  10. [WPF]控件应用多个样式

    最近在做WPF项目,公司没有专门的UI工程师,什么都要自己做.接触WPF已经有好几年了,自定义样式什么的也可以做一些.WPF在使用样式的时候一般都是 Style="{StaticResour ...