效果預覽：http://hovertree.com/texiao/css/22/
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://hovertree.com/texiao/css/22/css/hovertree_login.css" />
<title>用戶登錄-學工系統 _ 何問起</title><base target="_blank" />
</head>
<body>
<div id="header">
<div class="header_title">
<span class="title_con">何問起學工系統</span>
</div>
</div>
<div id="content">
<center>
<div class="con">
<div class="con_title">
<span class="con_title_sp">歡迎登錄學工系統</span>
</div>
<div class="con_panel">
<div class="con_input">
<span>用戶名：</span><input type="text" placeholder="學號/工號"/>
</div>
<div class="con_input">
<span>密 碼：</span><input type="text" placeholder="密碼"/>
</div>
<div class="con_select">
<input type="radio" name="t1" id="hovertreestu" value="學生" /><label for="hovertreestu">學生</label>
<input type="radio" name="t1" id="hovertreetea" value="教師" /><label for="hovertreetea">教師</label>
<input type="radio" name="t1" id="hovertreeadm" value="管理員" /><label for="hovertreeadm">管理員</label>
</div>
<input type="submit" value="登 錄" class="submit-btn"/>
</div>
</div>
</center>
</div>
<div id="footer">
© 市重點高中 技術支持：<a href="http://hovertree.com/">何問起</a>
<br /><a href="http://hovertree.com/h/bjaf/7ioeyqhe.htm">Demo 1</a> <a href="http://hovertree.com/hvtart/bjae/dh4pqx2p.htm">Demo 2</a> <a href="http://hovertree.com/h/bjaf/2hhi6cjy.htm">原文</a><a href="http://hovertree.com/texiao/">更多特效</a>
</div>
</body>
</html>
源碼下載：http://hovertree.com/h/bjaf/l243x19a.htm