基於CSS屬性animation動畫制作，效果流暢彈性十足
效果展示 http://hovertree.com/texiao/css3/32/
源碼下載：
http://hovertree.com/h/bjaf/fo1jlmhi.htm
效果圖如下：
代碼如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>CSS3鼠標滑過動畫線條邊框特效 - 何問起</title> <base target="_blank" /> <link rel="stylesheet" href="http://hovertree.com/texiao/css3/32/css/index.css" /> </head> <body> <div class="service"> <div class="service-list"> <ul class="clearfix" id="J_service_container"> <li> <a href="http://hovertree.com/tiku/"> <div class="item-box"> <h3>何問起題庫</h3> <h4>Web前端，HTML5，Java，C#，CSS等等</h4> <h4>考試，面試復習</h4> <h4>知識自測</h4> <div class="overlay-start"></div> <div class="overlay-bottom"></div> <div class="overlay-left"></div> <div class="overlay-top"></div> <div class="overlay-right"></div> <div class="start-point"> <i class="circle"></i> </div> </div> <div class="service-icon"> <div class="circle">+</div> </div> </a> </li> <li> <a href="http://hovertree.com/h/bjaf/l3c6nm7b.htm"> <div class="item-box"> <h3>何問起鍵盤</h3> <h4>用電腦鍵盤彈電子琴</h4> <h4>學習音樂好工具</h4> <h4>沒事彈小曲</h4> <div class="overlay-start"></div> <div class="overlay-bottom"></div> <div class="overlay-left"></div> <div class="overlay-top"></div> <div class="overlay-right"></div> <div class="start-point"> <i class="circle"></i> </div> </div> <div class="service-icon"> <div class="circle">+</div> </div> </a> </li> <li> <a href="http://m.hovertree.com/"> <div class="item-box"> <h3>何問起謎語</h3> <h4>謎語是中華民族歷史悠久的文化</h4> <h4>鍛煉思維</h4> <h4>一點一點落實（字）</h4> <div class="overlay-start"></div> <div class="overlay-bottom"></div> <div class="overlay-left"></div> <div class="overlay-top"></div> <div class="overlay-right"></div> <div class="start-point"> <i class="circle"></i> </div> </div> <div class="service-icon"> <div class="circle">+</div> </div> </a> </li> <li> <a href="http://hovertree.com/"> <div class="item-box"> <h3>何問起</h3> <h4>想問候不知從何問起</h4> <h4>就直接說喜歡你</h4> <h4>們</h4> <div class="overlay-start"></div> <div class="overlay-bottom"></div> <div class="overlay-left"></div> <div class="overlay-top"></div> <div class="overlay-right"></div> <div class="start-point"> <i class="circle"></i> </div> </div> <div class="service-icon"> <div class="circle">+</div> </div> </a> </li> <li> <a href="http://keleyi.com/"> <div class="item-box"> <h3>柯樂義</h3> <h4>木可柯</h4> <h4>樂意為您服務</h4> <h4>天長地久</h4> <div class="overlay-start"></div> <div class="overlay-bottom"></div> <div class="overlay-left"></div> <div class="overlay-top"></div> <div class="overlay-right"></div> <div class="start-point"> <i class="circle"></i> </div> </div> <div class="service-icon"> <div class="circle">+</div> </div> </a> </li> <li> <a href="http://hovertree.com/hovertreescj/"> <div class="item-box"> <h3>HoverTreeSCJ</h3> <h4>C#.NET Sql Server</h4> <h4>何問起收藏夾</h4> <h4>WinForm</h4> <div class="overlay-start"></div> <div class="overlay-bottom"></div> <div class="overlay-left"></div> <div class="overlay-top"></div> <div class="overlay-right"></div> <div class="start-point"> <i class="circle"></i> </div> </div> <div class="service-icon"> <div class="circle">+</div> </div> </a> </li> </ul> </div> </div> <div class="hovertreeinfo"> <p>適用瀏覽器：FireFox、Chrome、Opera、Edge、搜狗、世界之窗. 不支持Safari、IE8及以下瀏覽器。</p> <p>來源：<a href="http://hovertree.com/" target="_blank">何問起</a> <a href="http://hovertree.com/menu/texiao/">網頁特效</a> <a href="http://hovertree.com/h/bjaf/vphj0rrw.htm">代碼說明</a></p> </div> </body> </html>