CSS3鼠标滑过动画线条边框特效
基于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鼠标滑过动画线条边框特效的更多相关文章
- 15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- CSS3鼠标滑过图标放大以及旋转
本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
- 鼠标滑过图片添加边框图片无位移[xyytit]
实现下面的效果,鼠标滑过图片添加边框图片无位移——鼠标滑过,图片只是加了边框,不会晃动: 参考代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- 分享十个CSS3鼠标滑过文字动画特效
介绍10组基于CSS3的鼠标滑过文字动画特效,有上凸.下凹等文字动画.这些炫酷的CSS3文字效果可以让网页变得更加绚丽.效果图如下: 在线预览 源码下载 实现的代码. html代码: <h2 ...
- 简单的CSS3鼠标滑过图片标题和遮罩层动画特效
此文转自:http://www.cnblogs.com/w2bc/p/5735300.html,仅供本人学习参考,版权归原作者所有! 这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特 ...
- 基于CSS3鼠标滑过放大突出效果
还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...
- html5/CSS3鼠标滑过图片特效插件
在线演示 本地下载
- HTML5/CSS3鼠标滑过图片滤镜动画效果
在线演示 本地下载
随机推荐
- (转)从0开始搭建SQL Server AlwaysOn 第一篇（配置域控+域用户DCADMIN）
原文地址: http://www.cnblogs.com/lyhabc/p/4678330.html 实验环境: 准备工作 软件准备 (1) SQL Server 2012 (2) Windows S ...
- Topshelf 支持Mono 扩展Topshelf.Linux
使用Topshelf 5步创建Windows 服务 这篇文章大家可以了解到使用Topshelf可以很好的支持Windows服务的开发,但是它和Mono不兼容,Github上有一个扩展https://g ...
- 深入理解IIS的多线程工作机制
首先让我们来看看IIS里面的这2个数字:最大并发连接数,队列长度.先说这2个数字在哪里看. 最大并发连接数:在IIS中选中一个网站,右键网站名称,在右键菜单中找到并点击[管理网站]->[高级设置 ...
- 【完全开源】知乎日报UWP版：增加Live磁贴、Badge、以及Toast通知
目录 说明 实现方法 APP生命期 后台任务 说明 之前网上有人建议增加磁贴(tile).徽章(badge)功能.利用周末的时间,将这两个功能添加上去了.如果将磁贴固定到开始屏幕,磁贴就会循环播放首页 ...
- 在 Linux 中使用 Git 及其 和 Eclipse 的集成
##参考资料## 我是通过阅读<Pro Git>这本书学习 Git 的,我读的时候还是第一版的英文版,现在已经出第二版了,而且英文版和中文版都有.英文第二版的地址是 [https://gi ...
- 1、利用蓝牙定位及姿态识别实现一个智能篮球场套件（一）——用重写CC2541透传模块做成智能手环
一.预言 要实现一个智能篮球场套件,需要设计一个佩戴在篮球运动员手臂上的可以检测投篮.记步的手环,以及一套可以根据RSSI定位运动员的蓝牙定位装置.下面是大致需要的步骤: 首先,需要用CC2541透传 ...
- AKKA 笔记 - 有限状态机 -2
AKKA 笔记 - 有限状态机 -2 原文地址: http://rerun.me/2016/05/22/akka-notes-finite-state-machines-2/ 在上一节的Akka FS ...
- MySQL基础之索引
这段时间看了好多东西却没有总结,今天在这里写一写 关于索引 索引是一种提高查询效率的方法,它是B+树的结构,从根到中间节点在到叶子节点,无需遍历全部就可以查到所需的东西 关于索引的创建 一般有俩种方式 ...
- idea报错：error java compilation failed internal java compiler error
idea下面报如下问题 error java compilation failed internal java compiler error 解决办法:Setting->Compiler-> ...
- ReactJs 报错 Element type is invalid: expected a string (from built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `Me`.
今天在重构一个页面的时候,碰到了一个error,具体的error信息如下图中所示: 最后经过一番查找定位,终于找到了问题所在,原因就是在父组件引用子组件时多加了一个大括号. import {Chart ...