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

前端技术 2023/09/07 CSS

　　今天要给大家分享一款纯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>  

本文地址：https://www.stayed.cn/item/18527

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案