CSS3鼠标滑过动画线条边框特效

基于CSS属性animation动画制作，效果流畅弹性十足

效果展示 http://hovertree测试数据/texiao/css3/32/

源码下载：
http://hovertree测试数据/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测试数据/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测试数据/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测试数据/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测试数据/"  > 
           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测试数据/"  > 
           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测试数据/"  > 
           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测试数据/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测试数据/"   target  ="_blank"  > 何问起   a  >     a   href  ="http://hovertree测试数据/menu/texiao/"  > 网页特效   a  > 
   a   href  ="http://hovertree测试数据/h/bjaf/vphj0rrw.htm"  > 代码说明   a  >  p  > 
   div  > 
   body  > 
   html  >  

查看更多关于CSS3鼠标滑过动画线条边框特效的详细内容...