CSS3制作3D表单 <br />body{<br />background-color:#f7f0da;<br />background-image: -webkit-linear-gradient(180deg,transparent 90%,#eae4cf 10%);<br />background-image: -moz-linear-gradient(180deg,transparent 90%,#eae4cf 10%);<br />background-image: -o-linear-gradient(180deg,transparent 90%,#eae4cf 10%);<br />background-image: -ms-linear-gradient(180deg,transparent 90%,#eae4cf 10%);<br />background-image: linear-gradient(180deg,transparent 90%,#eae4cf 10%);<br />background-size: 5px 50px;<br />}<br />.box{ <br />margin:20px auto; <br />width:560px;<br />text-align:center;<br />font-weight:bold;<br />}<br />.box div:first-child{ <br />font-size:60px;<br />margin-bottom:20px;<br />text-shadow:0 2px 0 #c0c0c0,0 3px #979385;<br />}<br />.box .input_control{ <br />position:relative;<br />height:100px;<br />}<br />.box input{ <br />position:relative;<br />font-size:18px;<br />height:56px;<br />width:100%;<br />padding-left:10px;<br />border:12px solid #fff;<br />border-radius:3px;<br />box-shadow:inset 0 0 0 1px #c0c0c0,inset 1px 2px 0 #e6e6e6,1px 2px 0 #c0c0c0,-1px 2px 0 #c0c0c0,2px 3px 0 #c0c0c0,-2px 3px 0 #c0c0c0,2px 12px 0 #c0c0c0,-2px 12px 0 #c0c0c0,0 2px 0 3px #979797,0 10px 0 3px #979797,-2px 15px 10px rgba(0,0,0,.6);<br />-webkit-box-sizing:border-box;<br />-moz-box-sizing:border-box;<br />-o-box-sizing:border-box;<br />-ms-box-sizing:border-box;<br />box-sizing:border-box;<br />-webkit-transition: all 0.1s ease-in;<br />-moz-transition: all 0.1s ease-in;<br />-ms-transition: all 0.1s ease-in;<br />-o-transition: all 0.1s ease-in;<br />transition: all 0.1s ease-in;<br />}<br />.box label{ <br />position:absolute;<br />top:-2px; <br />right:50px; <br />width:74px; <br />height: 56px;<br />color:#f3f2f1;<br />text-shadow:0 3px 1px #9e2719;<br />border:1px solid #dd684f;<br />background:-webkit-linear-gradient(top,#e78d7b 0,#dd684f 72px);<br />background:-moz-linear-gradient(top,#e78d7b 0,#dd684f 72px);<br />background:-o-linear-gradient(top,#e78d7b 0,#dd684f 72px);<br />background:-ms-linear-gradient(top,#e78d7b 0,#dd684f 72px);<br />background:linear-gradient(top,#e78d7b 0,#dd684f 72px);<br />box-shadow:0 14px 0 #9c2912,0 0 5px rgba(0,0,0,.3);<br />-webkit-transition: all 0.1s ease-in;<br />-moz-transition: all 0.1s ease-in;<br />-o-transition: all 0.1s ease-in;<br />-ms-transition: all 0.1s ease-in;<br />transition: all 0.1s ease-in;<br />}<br />.box label:after{<br />position:absolute;<br />display:block;<br />width: 74px;<br />text-align: center;<br />font: normal normal 30px/56px 'icomoon';<br />speak: none;<br />-webkit-font-smoothing: antialiased;<br />-moz-font-smoothing: antialiased;<br />-o-font-smoothing: antialiased;<br />-ms-font-smoothing: antialiased;<br />font-smoothing: antialiased;<br />}<br />.input_control:nth-of-type(2) label:after{<br />content:"\21";<br />}<br />.input_control:nth-of-type(3) label:after{<br />content:"\22";<br />}<br />.input_control:nth-of-type(4) label:after{<br />content:"\23";<br />}<br />.box input:focus{<br />outline: 0 none;<br />top:2px; <br />box-shadow:inset 0 0 0 1px #c0c0c0,inset 1px 2px 0 #e6e6e6,1px 2px 0 #c0c0c0,-1px 2px 0 #c0c0c0,1px 3px 0 #c0c0c0,-2px 3px 0 #c0c0c0,2px 12px 0 #c0c0c0,-2px 12px 0 #c0c0c0,0 2px 0 3px #979797,0 10px 0 3px #979797,-2px 15px 10px rgba(0,0,0,.6);<br />}<br />.box input:focus + label{<br />top:0; <br />}<br />::-webkit-input-placeholder {<br />color:#d94a2d;<br />font-style:italic;<br />}<br />.box .btn{<br />position:relative; <br />width:210px; <br />height:60px;<br />color:#4c6e03;<br />font:bold 35px "Impact";<br />text-indent:10px;<br />letter-spacing:3px;<br />text-align:left;<br />margin-bottom:20px;<br />border:none;<br />border-radius:6px;<br />text-shadow:-1px 2px 0 #c4e184;<br />box-shadow:1px 2px 0 #5f8214,-1px 2px 0 #5f8214,2px 3px 0 #5f8214,-2px 3px 0 #5f8214,2px 12px 0 #5f8214,-2px 12px 0 #5f8214,0 2px 0 3px #304601,0 10px 0 3px #304601,-2px 15px 10px rgba(0,0,0,.6);<br />background:-webkit-linear-gradient(top,#c5e185,#a5c65c);<br />-webkit-transition: all 0.1s ease-in;<br />-moz-transition: all 0.1s ease-in;<br />-o-transition: all 0.1s ease-in;<br />-ms-transition: all 0.1s ease-in;<br />transition: all 0.1s ease-in;<br />}<br />.box .btn:after{ <br />position:absolute;<br />display:block; <br />content:"\25"; <br />width:36px; <br />height:36px; <br />border-radius:18px; <br />background:#5f8214; <br />top:10px; <br />right:20px;<br />text-indent:5px;<br />text-align:center; <br />color:#b3d36e;<br />text-shadow:0 3px 0 #325207;<br />box-shadow:inset 0 6px 0 #325207;<br />font: normal normal 18px/40px 'icomoon';<br />speak: none;<br />-webkit-font-smoothing: antialiased;<br />-moz-font-smoothing: antialiased;<br />-o-font-smoothing: antialiased;<br />-ms-font-smoothing: antialiased;<br />font-smoothing: antialiased;<br />}<br />.box .btn:hover{ <br />background:-webkit-linear-gradient(top,#a2c452,#a5c65c);<br />background:-moz-linear-gradient(top,#a2c452,#a5c65c);<br />background:-ms-linear-gradient(top,#a2c452,#a5c65c);<br />background:-o-linear-gradient(top,#a2c452,#a5c65c);<br />background:linear-gradient(top,#a2c452,#a5c65c);<br />}<br />.box .btn:active{<br />top:2px; <br />box-shadow:1px 2px 0 #a5c65c,-1px 2px 0 #a5c65c,1px 3px 0 #a5c65c,-2px 3px 0 #5f8214,2px 12px 0 #5f8214,-2px 12px 0 #5f8214,0 2px 0 3px #5f8214,0 10px 0 3px #304601,-2px 15px 10px rgba(0,0,0,.6);<br />}<br />.box p a{<br />color:#d94a2d; <br />line-height:30px;<br />font-size:14px;<br />}<br />@font-face {<br /> font-family: 'icomoon';<br /> src:url('fonts/icomoon.eot');<br /> src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),<br /> url('fonts/icomoon.svg#icomoon') format('svg'),<br /> url('fonts/icomoon.woff') format('woff'),<br /> url('fonts/icomoon.ttf') format('truetype');<br /> font-weight: normal;<br /> font-style: normal;<br />}<br /> http://www.999jiujiu.com/ secure login LOGIN
