之前给大家分享了很多css3实现的按钮特效。今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效。这款特效适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
<a href="#" class="hi-icon hi-icon-mobile">Mobile</a>
<a href="#" class="hi-icon hi-icon-screen">Desktop</a>
<a href="#" class="hi-icon hi-icon-earth">Partners</a>
<a href="#" class="hi-icon hi-icon-support">Support</a>
<a href="#" class="hi-icon hi-icon-locked">Security</a>
</div>

css3代码:

.hi-icon-effect-6 .hi-icon {
box-shadow: 0 0 0 4px rgba(255,255,255,1);
transition: background 0.2s, color 0.2s;
} .no-touch .hi-icon-effect-6 .hi-icon:hover {
background: rgba(255,255,255,1);
color: #64bb5d;
} .no-touch .hi-icon-effect-6 .hi-icon:hover:before {
animation: spinAround 2s linear infinite;
} @keyframes spinAround {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg);
}
}

via:http://www.w2bc.com/Article/20379

9款基于CSS3 Transitions实现的鼠标经过图标悬停特效的更多相关文章

  1. 一款基于css3非常实用的鼠标悬停特效

    今天给大家带来一款基于css3非常实用的鼠标悬停特效.这款特效,当鼠标经过时候一个半透明的遮罩层倒下来.效果很好,而且是纯css3实现的,代码很少,非常实用. 效果如下: 在线预览   源码下载 实现 ...

  2. 一款基于css3的简单的鼠标悬停按钮

    今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. 一款基于css3鼠标经过圆形旋转特效

    今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

  4. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  5. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  6. 一款基于css3的动画按钮

    之前为大家分享了 推荐10款纯css3实现的实用按钮.今天给大家带来一款基于css3的动画按钮.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=& ...

  7. 一款基于css3和jquery实现的动画弹出层

    今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: ...

  8. 一款纯css3实现的超炫动画背画特效

    之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览  ...

  9. iHover – 30+ 纯 CSS3 实现的超炫的图片悬停特效

    iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建(包括文件),便于修改变量.有模块化的代码, ...

随机推荐

  1. Chapter 5 Convert Image Set To LevelDB/LMDB

    Caffe中convert_imageset projrct将图像数据转换成Caffe能读取的数据格式leveldb/lmdb 1.添加命令参数 在main函数中添加命令参数,内容和位置如下: #if ...

  2. ruby 安装更新

    wget http://cache.ruby-lang.org/pub/ruby/2.2/ruby-2.2.2.tar.gz tar xfvz ruby-2.2.2.tar.gz cd ruby-2. ...

  3. 深入浅出谈存储:如何区别NAS、SAN与DAS

    深入浅出谈存储:如何区别NAS.SAN与DAS 2012年02月17日16:51 来源:新浪博客 作者:林沛满 编辑:曾智强 查看全文 赞(0)评论(1) 分享 标签: DAS , SAN , 存储系 ...

  4. 第二百二十七天 how can I 坚持

    今天去了蟒山,天池,刚去的时候身体有点难受,整天都是那样,回来就好多了,不知道怎么回事. 天池竟然是个人造池,挺大,没有去十三陵,回来都很晚了. 去天池竟然是走的小路,已经关了,不让进,里边玲玲清清的 ...

  5. CentOS下MySQL 5.7.9编译安装

    MySQL 5.7 GA版本的发布,也就是说从现在开始5.7已经可以在生产环境中使用,有任何问题官方都将立刻修复. MySQL 5.7主要特性: 更好的性能:对于多核CPU.固态硬盘.锁有着更好的优化 ...

  6. linux下 ls 排序

    ls -lS                       按大小降序排列 ls -l | sort -n -k5    按大小升序 ls -lrt                       按时间降 ...

  7. HDU 4496 D-City (并查集)

    题意:给定一个图,问你每次删除一条边后有几个连通块. 析:水题,就是并查集的运用,倒着推. 代码如下: #include <cstdio> #include <string> ...

  8. Jquery 操作 radio选中值

    1.获取radio选中值 1.1  $('input:radio:checked').val(); 1.2  $("input[type='radio']:checked").va ...

  9. 6.开放-关闭原则(Open-Close Principle)

    1.定义 一个软件实体(如类.模块.函数)应当对扩展开放,对修改关闭. 2.定义解读 在项目开发的时候,都不能指望需求是确定不变化的,大部分情况下,需求是变化的.那么如何应对需求变化的情况?这就是开放 ...

  10. CSS3- px、em、rem区别介绍

    PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em ...