简单的圆形图标鼠标hover效果

演示

本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果。这种效果在不少时尚的酷站上都有。本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animations来制作。图标的创建将使用IcoMoon app来完成。

注意：不是每一个浏览器都支持伪元素，最好是使用Chrome或Firefox浏览器观看。

HTML结构:

图标组的结构是使用一个div包含一组a元素，给每个a元素设置图标class。

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

CSS样式：

下面的样式是鼠标hover时，圆形图标旋转的效果。

.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);

}

注意：第四个例子中使用伪元素制作虚线边框的效果在FF 21.0中看不到效果。

其它各种效果请参考下载的css文件，都非常简单。

本教程就到这里，希望对你有所帮助。

本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141028314.html

转载于:https://www.cnblogs.com/zy-plan/p/5222507.html

简单的圆形图标鼠标hover效果 | CSS3教程相关推荐

html鼠标元素效果,十五种css3鼠标hover效果
css3有哪些不错的hover效果 CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦效果一:360°旋转修改rotate(旋转度数) 01 * { 02 transit ...
好看的鼠标hover效果
0919自我总结常见的鼠标hover效果展示效果:http://ianlunn.github.io/Hover/ 部分动画制作 <style><!-- .container {m ...
【操作】鼠标hover效果——元素凸起并产生阴影
.hover:hover {-webkit-transform: translateY(-3px);-ms-transform: translateY(-3px);transform: transla ...
html 图片选中效果,使用html5 svg和css3制作神奇的图片hover效果
如果你曾经访问过新版的Christmas Experiments网站,那么你一定被网站上的日历效果所吸引.今天我们将和大家一起来研究如何使用SVG和Snap.svg来实现这种效果.思路是用svg创建一 ...
【我的代码】前端遇上After Effects --- 鼠标悬浮效果（上）
通过AE+PS+CSS3动画实现炫酷的鼠标hover效果(上)--动画的制作和PNG序列的输出一.大体思路大概就是用AE做动画导出帧序列,PS排版成一个长条的图片,然后再在css样式中设置动画. ...
html 鼠标悬停效果,30个帅气的鼠标悬停效果
30个帅气的鼠标悬停效果 3月 26, 2015 评论 (1) Sponsor 在网页设计中,鼠标悬停效果常用于文字链接.产品图片.按钮等地方,然而随着CSS3的强大,鼠标Hover效果可以变得有更多 ...
html hover效果手势,触控设备中Hover效果的互动设计
对于网页浏览者来说,按钮控件的变化可以说是再熟悉不过的一种机制了:一般使用鼠标浏览时最容易感受到的有Normal.Hover以及Archive这三种效果,分别为按钮平时的状态.鼠标游标移到上方的效果. ...
15 个最新的 CSS3 教程
1. 创建一个漂亮的图标这个教程将教你如何用纯CSS3创建一个图中的图标 2. CSS3 图片样式这个教程将教你如何使用 box-shadow, border-radius和transition. ...
boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...
html标题前圆圈样式,漂亮的css3圆形鼠标悬停效果实例
本文将给大家介绍一个漂亮的css3圆形鼠标悬停效果,这个效果在产品展示或列表图片中都可以应用,可以说是应用范围挺广泛的.关于鼠标悬停效果,你还可以看看另一篇文章<使用css转换和3d旋转的圆形鼠 ...

简单的圆形图标鼠标hover效果 | CSS3教程

HTML结构:

CSS样式：

简单的圆形图标鼠标hover效果 | CSS3教程相关推荐

最新文章

热门文章