网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/16 浏览:3 次 )

  今天要给大家分享一款纯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>  
上一篇:利用CSS span实现双语菜单的方法教程
下一篇:css中position属性使用详解
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。