9款基于CSS3 Transitions实现的鼠标经过图标悬停特效

之前给大家分享了很多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://***/Article/20379

9款基于CSS3 Transitions实现的鼠标经过图标悬停特效相关推荐

html图片 3d切换特效,一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 实现的代码. html代码: Bedouin Blue-green Dram ...
一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
html css3 3d翻转,一款基于css3的散子3D翻转特效
css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: . .. ... ...
推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
html css 圆形按钮仿uc,10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
【HTML5示例代码分享】基于CSS3和jQuery的相片墙效果
一款基于CSS3和jQuery的相片墙,效果非常酷.支持鼠标滚轮退出当前图片. UDE 模拟调试效果图: 附××× 转载于:https://blog.51cto.com/cmccude/1272181
html5卷轴展开动画,8款基于Jquery的WEB前端动画特效
超级绚丽,20款前端动画特效,轰炸你的眼睛,一定要看到最后! 1.超炫酷的30个jQuery按钮悬停动画按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的 ...
12款超强CSS3应用集锦下载
CSS3非常强大,它可以渲染很多你意想不到的特效,而且目前浏览器对CSS3的支持也逐渐放开了,所以利用CSS3可以制作一些即美观又实用的网页应用,下面12款CSS3应用集锦分享给大家,有源代码下载. ...
基于css3 transform实现散乱的照片排列
分享一款基于css3 transform实现散乱的照片排列.这是一款简单零散的css3相册排列特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <div class ...

9款基于CSS3 Transitions实现的鼠标经过图标悬停特效

9款基于CSS3 Transitions实现的鼠标经过图标悬停特效相关推荐

最新文章

热门文章