演示

本教程将和大将分享一些简单的圆形图标在鼠标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

简单的圆形图标鼠标hover效果 | CSS3教程的更多相关文章

  1. 好看的鼠标hover效果

    0919自我总结 常见的鼠标hover效果 展示效果:http://ianlunn.github.io/Hover/ 部分动画制作 <style><!-- .container { ...

  2. 如何不使用js实现鼠标hover弹出菜单效果

    最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素. <ul> <li>主页</li ...

  3. HTML5鼠标hover的时候图片放大的效果展示

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 鼠标HOVER时区块动画旋转变色的CSS3样式掩码

    鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...

  5. css3 hover效果

    html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. Web页面中5种超酷的Hover效果

    hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器 的支持,我们可以用纯粹的CSS代码来实现这 ...

  7. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  8. HTML页面中5种超酷的伪类选择器:hover效果

    想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点. 给平淡的站点带来活力 hover效果能给网页增加一些动态 ...

  9. Echarts 地图(map)插件之 鼠标HOVER和tooltip自定义提示框

    [自行修改 "引号"] 一.鼠标HOVER时的事件: 参照官方文档解释, 可以看出这款插件有丰富的鼠标事件可供选择: 调用鼠标HOVER事件的方法很简单,只需把以下代码放到char ...

随机推荐

  1. grunt + compass retina sprites

    https://github.com/AdamBrodzinski/Retina-Sprites-for-Compass

  2. Web内容管理系统 Magnolia 启程-挖掘优良的架构(3)

    Author and Public instances 第一个关键观念:instance-实例.每一个项目都必须至少有一个Author实例和至少一个Public实例.下面将告诉你为什么: 基本概念:J ...

  3. Parallel WebDriver executions using TestNG

    In this post, we will see how does one make use of TestNG to kick off parallel UI tests using WebDri ...

  4. UVa 11529 (计数) Strange Tax Calculation

    枚举一个中心点,然后将其他点绕着这个点按照极角排序. 统计这个中心点在外面的三角形的个数,然后用C(n-1, 3)减去这个数就是包含这个点的三角形的数量. 然后再枚举一个起点L,终点为弧度小于π的点R ...

  5. HDU 3492 (直线与所有线段相交) Segment

    题意: 给出n个线段,判断是否存在一条直线使得所有线段在直线上的射影的交非空. 分析: 如果我们找到一条与所有线段相交的直线,然后做一条与该直线垂直的直线,这些线段在直线上的射影就一定包含这个垂足. ...

  6. sql server2005内存过高释放方法

    最近做了一个网站qq.115sou.com,在服务器中SQL Server占用内存非常高,加内存后,SQL Server又吃掉新加的内存,好像内存永远不够用一样,怎么办? 其实这并不一定是由于SQL ...

  7. vc/mfc获取rgb图像数据后动态显示及保存图片的方法

    vc/mfc获取rgb图像数据后动态显示及保存图片的方法 该情况可用于视频通信中获取的位图数据回放显示或显示摄像头捕获的本地图像 第一种方法 #include<vfw.h> 加载 vfw3 ...

  8. 门户网站架构Nginx+Apache+MySQL+PHP+Memcached+Squid

    服务器的大用户量的承载方案 一.前言二.编译安装三. 安装MySQL.memcache四. 安装Apache.PHP.eAccelerator.php-memcache五. 安装Squid六.后记 一 ...

  9. 深入浅出 iOS 之生命周期

    转:http://blog.csdn.net/kesalin/article/details/6691766 iOS应用程序的生命周期相比 Android 应用程序的生命周期来说,没那么简明易懂,但是 ...

  10. alibaba笔试

    1.D  A(7,7)/(A(3,3)A(2,2)) = 420 关联: 字符串的排列和组合:http://blog.csdn.net/hackbuteer1/article/details/7462 ...