纯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:
