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

CSS3鼠标滑过动画线条边框特效的更多相关文章

  1. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  2. CSS3鼠标滑过图标放大以及旋转

    本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...

  3. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  4. 鼠标滑过图片添加边框图片无位移[xyytit]

    实现下面的效果,鼠标滑过图片添加边框图片无位移——鼠标滑过,图片只是加了边框,不会晃动: 参考代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  5. 分享十个CSS3鼠标滑过文字动画特效

    介绍10组基于CSS3的鼠标滑过文字动画特效,有上凸.下凹等文字动画.这些炫酷的CSS3文字效果可以让网页变得更加绚丽.效果图如下: 在线预览   源码下载 实现的代码. html代码: <h2 ...

  6. 简单的CSS3鼠标滑过图片标题和遮罩层动画特效

    此文转自:http://www.cnblogs.com/w2bc/p/5735300.html,仅供本人学习参考,版权归原作者所有!   这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特 ...

  7. 基于CSS3鼠标滑过放大突出效果

    还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...

  8. html5/CSS3鼠标滑过图片特效插件

    在线演示 本地下载

  9. HTML5/CSS3鼠标滑过图片滤镜动画效果

    在线演示 本地下载

随机推荐

  1. Android之使用Bundle进行IPC

    一.Bundle进行IPC介绍 四大组件中的三大组件(Activity.Service.Receiver)都是支持在Intent中传递Bundle数据的,由于Bundle实现了Parcelable接口 ...

  2. maven打包插件:appassembler

    1.打包成bat 打包命令:mvn clean package appassembler:assemble <plugin> <groupId>org.codehaus.moj ...

  3. Centos6.5 配置Nginx开机自启动

    1.在/etc/init.d/目录下创建 nginx 文件,内容如下: #!/bin/sh # # nginx - this script starts and stops the nginx dae ...

  4. tg2015 信息传递 （洛谷p2661)

    题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一 ...

  5. IM 去中心化概念模型与架构设计

    今天打算写写关于 IM 去中心化涉及的架构模型变化和设计思路,去中心化的概念就是说用户的访问不是集中在一个数据中心,这里的去中心是针对数据中心而言的. 站在这个角度而言,实际上并非所有的业务都能做去中 ...

  6. Mono产品生命周期

    软件生命周期 同任何事物一样,一个软件产品或软件系统也要经历孕育.诞生.成长.成熟.衰亡等阶段,一般称为软件生命周期(软件生存周期) .软件生命周期模型是指人们为开发更好的软件而归纳总结的软件生命周期 ...

  7. 扑面而来的碎片--图片3D炸裂效果初体验

    之前逛园子的时候看到 ChokCoco 的爆炸效果作品:[BOOM]一款有趣的Javascript动画效果 (大神英文有没有拼错呀←.←),觉得蛮有意思的,效果如下: 不过觉得这个爆炸效果还是偏软了一 ...

  8. Entity Framework 6 Recipes 2nd Edition（12-7）译 -> 设定默认值

    12-7. 设定默认值 问题 在把一个实体保存到数据库之前,设置该实体属性的默认值 解决方案 假设你有一个如Figure 12-9所示的表, 它保存采购订单(purchase order). 主键Pu ...

  9. TCP同步与异步,长连接与短连接【转载】

    原文地址:TCP同步与异步,长连接与短连接作者:1984346023 [转载说明:http://zjj1211.blog.51cto.com/1812544/373896   这是今天看到的一篇讲到T ...

  10. 设计模式之合成/聚合利用原则（CARP）

    一.概念 CARP:CompositionAggregation Principle 合成聚合复用原则,尽量使用合成/聚合,尽量不使用类继承.合成聚合是“has  a”的关系,而继承是“is  a”的 ...