jquery实现3D立体表单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery实现3D立体表单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery实现3D立体表单</title>
<link rel="stylesheet" title="Default" href="images/css3-formular-styles.css" type="text/css" media="screen">
</head>
<body>
<div class="wrapper">
<form class="commentForm" action="#" method="post">
<fieldset>
<legend>Kontakformular</legend>
<ol class="clearfix">
<li>
<label for="firstname">Vorname:</label>
<input gtbfieldid="1" size="35" name="firstname" id="firstname" type="text">
</li>
<li>
<label for="email">E-Mail: (optional)</label>
<input gtbfieldid="2" size="35" name="email" id="email" type="text">
</li>
<li>
<label for="content">Inhalt:</label>
<textarea cols="32" rows="7" name="content" id="content"></textarea>
</li>
<li class="last">
<input name="submit" id="submit" value="Absenden" type="submit">
</li>
</ol>
</fieldset>
</form><br />
</div>
</body>
</html>

CSS代码(css3-formular-styles.css):

html,body{height:100%}
body{font:100.01%/1.25 Helvetica,Arial,"Lucida Sans","DejaVu Sans","Bitstream Vera Sans",sans-serif;background-color:white;color:#555;margin:0}
.wrapper{font-size:13px;min-height:100%;margin:0 auto;padding:10px;position:relative;width:980px;border:solid #ccc;border-width:0 1px}
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.clearfix{display:block}
html[xmlns] .clearfix{display:block}
/* Hides from IE-mac \*/
* html .clearfix{height:1%}
.clearfix{display:block}
/* End hide from IE-mac */
form{background:#fff url(http://www.kulando.de/templates/blog_1575/new_greenmarinee/images/css3-form-comments-bg.png) no-repeat 0 0;padding:3px 0 0;margin:10px auto;width:520px}
fieldset{background:#fff url(http://www.kulando.de/templates/blog_1575/new_greenmarinee/images/css3-form-comments-bg.png) no-repeat 0 100%;border:none;margin:0;padding:10px 20px 25px}
fieldset legend{font-weight:bold;color:#555;font-size:22px;margin:15px 0 0 6px;}
ol{list-style-type:none;margin:0;padding:0}
li{float:left;padding:10px}
li.last{float:none;clear:both;text-align:right}
label{display:block;cursor:pointer;font-weight:bold;line-height:24px}
input,textarea{background-color:#FFF;color:#4d4d4d;border:1px solid #c4c4c4;font:13px Helvetica,Arial,"Nimbus Sans L",FreeSans,sans-serif;padding:8px 12px;width:190px;_width:186px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:2px 2px 5px #e2e2e2,inset 2px 2px 5px #e2e2e2;-moz-box-shadow:2px 2px 5px #e2e2e2,inset 2px 2px 5px #e2e2e2;box-shadow:2px 2px 5px #e2e2e2,inset 2px 2px 5px #e2e2e2;/* IE filter */
filter:progid:DXImageTransform.Microsoft.Shadow(color='#e2e2e2',Direction=135,Strength=5);-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color='#e2e2e2',Direction=135,Strength=5)"}
input:focus,textarea:focus{border-color:#4d4d4d;}
input[type="submit"]{background-color:#c50a1f;color:#fff;cursor:pointer;font:italic bold 1em/1.2 Georgia,"Times New Roman",Times,Cambria,"Nimbus Roman No9 L",serif;border:1px double #e35061;margin:10px;padding:5px 10px;width:auto;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;background:-moz-linear-gradient(top,#e1001a,#c50a1f);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e1001a),color-stop(1,#c50a1f));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#e1001a',EndColorStr='#c50a1f');-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#e1001a',EndColorStr='#c50a1f')";-moz-box-shadow:1px 0 0 #c50a1f,-1px 0 0 #c50a1f,0 1px 0 #c50a1f,0 -1px 0 #c50a1f,0 5px 10px -5px #666;-webkit-box-shadow:1px 0 0 #c50a1f,-1px 0 0 #c50a1f,0 1px 0 #c50a1f,0 -1px 0 #c50a1f,0 5px 10px -5px #666;box-shadow:1px 0 0 #c50a1f,-1px 0 0 #c50a1f,0 1px 0 #c50a1f,0 -1px 0 #c50a1f,0 5px 10px -5px #666;text-shadow:1px 1px 3px #333}
input[type="submit"]:hover{background:#c50a1f;text-shadow:none;}
textarea{width:425px;overflow:auto;}
/* IE7 styles */
*+html legend{margin-left:0px}
*+html textarea{width:430px}
*+html li.last{padding:5px}
*+html input[type="submit"]{width:100px}

附件:下载该文件资源,减少时间成本(增值服务)