一款利用纯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圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
html5是什么_动力节点Java学院整理
Jul 07 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 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
php发送与接收流文件的方法
2015/02/11 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
javascript 节点排序 2
2011/01/31 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python中集合类型(set)学习小结
2015/01/28 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python中zfill()方法的使用教程
2015/05/20 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
思想汇报格式
2014/01/05 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
优秀干部获奖感言
2014/01/31 职场文书
部队党性分析材料
2014/02/16 职场文书
投资意向书范本
2014/04/01 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang