HTML5+CSS3超酷表單特效代碼

2024-09-05 12:18:56

字體：大中小

來源：轉載

供稿：網友

很漂亮的表單特效代碼，基于HTML5技術，帶有數據驗證判斷功能，HTML5確實是很不錯的啊，可惜現在IE8不支持HTML5。與普通的表彰比，還是有優勢的。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>HTML5+CSS3超酷表單效果</title><style>*: focus{outline: none;}body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;/**/}#top_bit{width: 760px;margin: 0 auto;}form{width: 300px;margin: 20px auto;}p{line-height: 1.6;}input, textarea{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;background-color: #fff;border: 1px solid #ccc;font-size: 20px;width: 300px;min-height: 30px;display: block;margin-bottom: 16px;margin-top: 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}textarea{min-height: 200px;}input: focus, textarea: focus{-webkit-box-shadow: 0 0 25px #ccc;-moz-box-shadow: 0 0 25px #ccc;box-shadow: 0 0 25px #ccc;-webkit-transform: scale(1.05);-moz-transform: scale(1.05);transform: scale(1.05);}input: not(: focus), textarea: not(: focus){opacity: 0.5;}input: required, textarea: required{background: url("/jscss/demoimg/201310/formdemo/asterisk_orange.png") no-repeat 280px 7px;}input: valid, textarea: valid{background: url("/jscss/demoimg/201310/formdemo/tick.png") no-repeat 280px 5px;}input: focus: invalid, textarea: focus: invalid{background: url("/jscss/demoimg/201310/formdemo/cancel.png") no-repeat 280px 7px;}input[type=submit]{padding: 10px;background: none;opacity: 1.0;}</style></head><body><div   class="iwvjtn8m0"   id="top_bit"><h1>HTML5 Form Demo</h1><p>If you don't see asterisks or ticks then your browser doesn't support the HTML5 bits we are looking at. Try Chrome Dev builds, Webkit Nightlies</p></div>	<form action="formdemo.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" required placeholder="Name" /><label for="email">Email:</label> <input type="email" name="email" required placeholder="email@example.com" /><label for="website">Website:</label> <input type="url" name="website" required placeholder="website" /><label for="number">Number:</label> <input type="number" name="number" min="0" max="10" step="2" required placeholder="Even num < 10"><label for="range">Range:</label> <input type="range" name="range" min="0" max="10" step="2" /><label for="message">Message:</label> <textarea name="message" required>

上一篇：html5實現的簡單進度條效果

下一篇：HTML5黑客帝國文字下落特效