一款利用纯css3实现的超炫3D表单的实例教程


Posted in HTML / CSS onDecember 01, 2014

今天要给大家分享一款纯css3实现的超炫3D表单。该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正。效果非常炫,一起看下效果图:

一款利用纯css3实现的超炫3D表单的实例教程

实现的代码。

html代码:

XML/HTML Code复制内容到剪贴板
  1. <div id="face">  
  2.         <div id="content">  
  3.             <p>  
  4.                 <input type="text" placeholder="Name" /></p>  
  5.             <p>  
  6.                 <input type="text" placeholder="Email" /></p>  
  7.             <p>  
  8.                 <textarea placeholder="Comments"></textarea></p>  
  9.             <p>  
  10.                 <input type="button" value="SUBMIT" /></p>  
  11.         </div>  
  12.     </div>  

css3代码:

CSS Code复制内容到剪贴板
  1. <div id="face">   
  2.         <div id="content">   
  3.             <p>   
  4.                 <input type="text" placeholder="Name" /></p>   
  5.             <p>   
  6.                 <input type="text" placeholder="Email" /></p>   
  7.             <p>   
  8.                 <textarea placeholder="Comments"></textarea></p>   
  9.             <p>   
  10.                 <input type="button" value="SUBMIT" /></p>   
  11.         </div>   
  12.     </div>  
HTML / CSS 相关文章推荐
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
html5基础教程常用技巧整理
Aug 20 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 #HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 #HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 #HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 #HTML / CSS
html5+css3之动画在webapp中的应用
Nov 21 #HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 #HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 #HTML / CSS
You might like
极典R601SW收音机
2021/03/02 无线电
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP 字符串 小常识
2009/06/05 PHP
PHP教程 预定义变量
2009/10/23 PHP
PHP 压缩文件夹的类代码
2009/11/05 PHP
PHP Stream_*系列函数
2010/08/01 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
jQuery的一些注意
2006/12/06 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
通过cmd进入python的步骤
2020/06/16 Python
python中sys模块是做什么用的
2020/08/16 Python
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
教师党员个人整改措施
2014/10/27 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
庆七一晚会主持词
2015/06/30 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
MySQL创建管理KEY分区
2022/04/13 MySQL
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技
springboot读取nacos配置文件
2022/05/20 Java/Android