一款利用纯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 15 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 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数组的维度
2013/06/10 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
js实现动态时钟
2020/03/12 Javascript
python中实现php的var_dump函数功能
2015/01/21 Python
Python中的两个内置模块介绍
2015/04/05 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
python机器学习之神经网络(二)
2017/12/20 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
python实现简单成绩录入系统
2019/09/19 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
锐步英国官网:Reebok英国
2019/11/29 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
经管应届生求职信
2013/11/17 职场文书
初中新生军训方案
2014/05/13 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
实施意见格式范本
2015/06/05 职场文书
Python数组变形的几种实现方法
2022/05/30 Python