首页 > Web开发 > 详细

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

时间:2016-02-07 07:30:43      阅读:270      评论:0      收藏:0      [点我收藏+]

  今天要给大家分享一款纯css3实现的超炫3D表单。该特效页面的加载的时候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>  

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

原文:http://www.jb51.net/css/253787.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!