这是一个使用jQuery和CSS3创建的全屏分步用户调查问卷表单，每个步骤在单独屏幕上显示，需填写信息才能进入下一步。表单包含扁平化设计和进度条，使用animate.css实现动画效果，并且具有响应式布局。通过jQuery处理表单交互，如进度条动画和按钮响应。答案会实时更新显示在最后的回顾部分。
这是一款非常实用的jQuery和CSS3全屏分步式用户调查问卷表单设计效果。该表单每一个步骤显示在一个屏幕中，只有填写了相应的信息，下一步按钮才会出现。该表单使用animate.css来制作元素动画，效果非常的酷。
制作方法
HTML结构
该用户问卷表单采用扁平化的风格。在页面的顶部有一个很细的进度条来显示已完成的步骤。整个表单的分步采用无序列表来制作。
进度条的HTML结构如下：
分步表单的HTML结构如下：
Hey there!
Let's get this party started. Would you mind introducing yourself?
...
Please Review Your Answers (click on any of them to edit):
...
CSS样式
该用户问卷表单只提供了一些基本的CSS样式。并使用媒体查询来制作响应式表单效果。所有的动画效果都是通过animate.css来完成的。
JAVASCRIPT
在jQuery代码中，主要是处理进度条的动画，以及提交按钮和下一
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
