基于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>hovertreescjh3> h4>c#.net sql serverh4> h4>何问起收藏夹h4> h4>winformh4> 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>
转自：http://hovertree.com/h/bjaf/vphj0rrw.htm
特效汇总：http://www.cnblogs.com/jihua/p/webfront.html