[Investor Relations]  |  官方微博

Web培训

美国上市公司 · 亿元级外企Java培训企业

Web培训 > 

知识库

  • 一款纯css3实现的超炫3D表单

    发布：达内　　来源：达内　　时间： 2015年01月09日

  • 今天要给大家分享一款纯 css3 实现的超炫3D表单。该特效页面的加载的时候3d四十五度倾斜，当鼠标经过的时候表单动画回正。效果非常炫，一起看下效果图：...

  • < p style="margin:0px 0px 0.75em;font-size:16px;line-height:28.796875px;text-indent:1em;color:#333333;font-family:'Helvetica Neue', Helvetica, Tahoma, Arial, STXihei, 'Microsoft YaHei', 微软雅黑, sans-serif;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;orphans:auto;text-align:start;text-transform:none;white-space:normal;widows:auto;word-spacing:0px;-webkit-text-stroke-width:0px;background-color:#FFFFFF;"> 今天要给大家分享一款纯  css3   实现的超炫3D表单。该特效页面的加载的时候3d四十五度倾斜，当鼠标经过的时候表单动画回正。效果非常炫，一起看下 效果图：

    1. css3 实现的超炫3D表单
    < span style="color:#333333;font-family:'Helvetica Neue', Helvetica, Tahoma, Arial, STXihei, 'Microsoft YaHei', 微软雅黑, sans-serif;font-size:16px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:28.796875px;orphans:auto;text-align:start;text-indent:16px;text-transform:none;white-space:normal;widows:auto;word-spacing:0px;-webkit-text-stroke-width:0px;background-color:#FFFFFF;"> < p style="margin:0px 0px 0.75em;font-size:16px;line-height:28.796875px;text-indent:1em;color:#333333;font-family:'Helvetica Neue', Helvetica, Tahoma, Arial, STXihei, 'Microsoft YaHei', 微软雅黑, sans-serif;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;orphans:auto;text-align:start;text-transform:none;white-space:normal;widows:auto;word-spacing:0px;-webkit-text-stroke-width:0px;background-color:#FFFFFF;">

    < p style="margin:0px 0px 0.75em;font-size:16px;line-height:28.796875px;text-indent:1em;color:#333333;font-family:'Helvetica Neue', Helvetica, Tahoma, Arial, STXihei, 'Microsoft YaHei', 微软雅黑, sans-serif;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;orphans:auto;text-align:start;text-transform:none;white-space:normal;widows:auto;word-spacing:0px;-webkit-text-stroke-width:0px;background-color:#FFFFFF;"> 实现的代码。

    < p style="margin:0px 0px 0.75em;font-size:16px;line-height:28.796875px;text-indent:1em;color:#333333;font-family:'Helvetica Neue', Helvetica, Tahoma, Arial, STXihei, 'Microsoft YaHei', 微软雅黑, sans-serif;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;orphans:auto;text-align:start;text-transform:none;white-space:normal;widows:auto;word-spacing:0px;-webkit-text-stroke-width:0px;background-color:#FFFFFF;"> html代码：

    < div style="font-size:16px;line-height:28.796875px;color:#333333;font-family:'Helvetica Neue', Helvetica, Tahoma, Arial, STXihei, 'Microsoft YaHei', 微软雅黑, sans-serif;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;orphans:auto;text-align:start;text-indent:0px;text-transform:none;white-space:normal;widows:auto;word-spacing:0px;-webkit-text-stroke-width:0px;background-color:#FFFFFF;">

    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>
    复制代码
< span style="color:#333333;font-family:'Helvetica Neue', Helvetica, Tahoma, Arial, STXihei, 'Microsoft YaHei', 微软雅黑, sans-serif;font-size:16px;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:28.796875px;orphans:auto;text-align:start;text-indent:0px;text-transform:none;white-space:normal;widows:auto;word-spacing:0px;-webkit-text-stroke-width:0px;background-color:#FFFFFF;display:inline !important;float:none;"> css3代码： < div style="font-size:16px;line-height:28.796875px;color:#333333;font-family:'Helvetica Neue', Helvetica, Tahoma, Arial, STXihei, 'Microsoft YaHei', 微软雅黑, sans-serif;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;orphans:auto;text-align:start;text-indent:0px;text-transform:none;white-space:normal;widows:auto;word-spacing:0px;-webkit-text-stroke-width:0px;background-color:#FFFFFF;">

  1. body

  2. {

  3. -webkit-perspective: 3000;

  4. perspective: 3000;

  5. overflow: hidden;

  6. }

  7. #face

  8. {

  9. margin: 0;

  10. padding: 0;

  11. width: 320px;

  12. height: 400px;

  13. -webkit-transform: rotateX(60deg) rotateZ(-50deg);

  14. transform: rotateX(60deg) rotateZ(-50deg);

  15. -webkit-transform-style: preserve-3d;

  16. transform-style: preserve-3d;

  17. -webkit-transition: all 2s;

  18. transition: all 2s;

  19. position: absolute;

  20. top: 0;

  21. left: 0;

  22. right: 0;

  23. margin: auto;

  24. }

  25. #face:hover

  26. {

  27. -webkit-transform: rotateX(0deg) rotateZ(0deg);

  28. transform: rotateX(0deg) rotateZ(0deg);

  29. }

  30. #content

  31. {

  32. width: 320px;

  33. height: 375px;

  34. padding: 15px 0px;

  35. background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%);

  36. background: linear-gradient(to bottom, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%);

  37. -webkit-transform-style: preserve-3d;

  38. transform-style: preserve-3d;

  39. text-align: center;

  40. }

  41. #content:before, #content:after

  42. {

  43. content: '';

  44. position: absolute;

  45. top: 0;

  46. left: 0;

  47. right: 0;

  48. bottom: 0;

  49. background: inherit;

  50. }

  51. #content:before

  52. {

  53. -webkit-transform-origin: left center;

  54. -ms-transform-origin: left center;

  55. transform-origin: left center;

  56. -webkit-transform: rotateY(90deg);

  57. transform: rotateY(90deg);

  58. width: 15px;

  59. }

  60. #content:after

  61. {

  62. -webkit-transform-origin: bottom center;

  63. -ms-transform-origin: bottom center;

  64. transform-origin: bottom center;

  65. -webkit-transform: rotateX(90deg);

  66. transform: rotateX(90deg);

  67. height: 15px;

  68. top: auto;

  69. bottom: 0;

  70. background-position: bottom center;

  71. }


  73. p input[type="text"], p textarea

  74. {

  75. width: 258px;

  76. font-size: 18px;

  77. padding: 10px;

  78. margin-top: 10px;

  79. border: 1px solid #fff;

  80. }

  81. p input[type="text"]

  82. {

  83. height: 24px;

  84. }

  85. p textarea

  86. {

  87. height: 100px;

  88. resize: none;

  89. }

  90. p input[type="button"]

  91. {

  92. width: 278px;

  93. border: 4px solid #fff;

  94. background-color: #51A8FF;

  95. color: #fff;

  96. font-size: 24px;

  97. padding: 14px 0px;

  98. font-weight: 700;

  99. -webkit-transition: all 0.5s;

  100. transition: all 0.5s;

  101. }

  102. p input[type="button"]:hover

  103. {

  104. background: #9ECEFF;

  105. color: #222;

  106. }

  107. p input:focus, textarea:focus

  108. {

  109. outline: 4px solid #007FFF;

  110.         }

  • 上一篇：用拼积木的方式做HTML5产品

    下一篇：JS应用DOM入门和DHTML对象模型的比较

    • 相关资讯
    最新资讯
    在线试听
    达内课程
    2001-2014 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56