基于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>

转自:http://hovertree.com/h/bjaf/vphj0rrw.htm

特效汇总:http://www.cnblogs.com/jihua/p/webfront.html

posted on 2016-07-03 13:04  计划  阅读(7036)  评论(0编辑  收藏  举报