纯CSS3实现的联系人表单输入效果 <br> * { margin: 0px; padding: 0px; }<br> <br> body { <br> margin: 0 auto; <br> background: #f5f5f5; <br> color: #555; <br> width: 800px; <br> font-family: 'Yanone Kaffeesatz', arial, sans-serif;<br> }<br> <br> h1 { <br> color: #555; <br> margin: 0 0 20px 0; <br> } <br> <br> label { <br> font-size: 20px;<br> color: #666; <br> }<br> <br> form { <br> float: left;<br> border: 1px solid #ddd; <br> padding: 30px 40px 20px 40px; <br> margin: 75px 0 0 0;<br> width: 715px;<br> background: #fff;<br> -webkit-border-radius: 10px;<br> -moz-border-radius: 10px;<br> border-radius: 10px; <br> background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFFFFF)); <br> background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE); <br> -webkit-box-shadow:0px 0 50px #ccc;<br> -moz-box-shadow:0px 0 50px #ccc; <br> box-shadow:0px 0 50px #ccc; <br> } <br> <br> fieldset { border: none; }<br> <br> #user-details { <br> float: left;<br> width: 230px; <br> }<br> <br> #user-message { <br> float: right;<br> width: 405px;<br> }<br> <br> input, textarea { <br> padding: 8px; <br> margin: 4px 0 20px 0; <br> background: #fff; <br> width: 220px; <br> font-size: 14px; <br> color: #555; <br> border: 1px #ddd solid;<br> -webkit-box-shadow: 0px 0px 4px #aaa;<br> -moz-box-shadow: 0px 0px 4px #aaa; <br> box-shadow: 0px 0px 4px #aaa; <br> -webkit-transition: background 0.3s linear; <br> }<br> <br> textarea { <br> width: 390px; <br> height: 175px; <br> }<br> <br> input:hover, textarea:hover { <br> background: #eee; <br> }<br> <br> input.submit { <br> width: 150px; <br> color: #eee; <br> text-transform: uppercase; <br> margin-top: 10px;<br> background-color: #18a5cc;<br> border: none;<br> -webkit-transition: -webkit-box-shadow 0.3s linear;<br> -moz-border-radius: 4px; <br> -webkit-border-radius: 4px;<br> border-radius: 4px; <br> background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); <br> background: -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc); <br> } <br> <br> input.submit:hover { <br> -webkit-box-shadow: 0px 0px 20px #555;<br> -moz-box-shadow: 0px 0px 20px #aaa; <br> box-shadow: 0px 0px 20px #555; <br> cursor: pointer; <br> } <br> <br> http://www.999jiujiu.com/ Get In Touch With Us ... Name: Email: Phone: Website: Your Message:
