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

演示

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

时间： 2024-12-24 10:32:29

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

一个简单的tr:hover效果

昨天,搞项目的时候,在一个小问题上卡了40分钟,现在想想,还是平时比较少去注意一些细节,经过这次,一定要去多注意细节了. 好了废话不多说,我现在说明下遇到的问题,一个表格中,要求是当鼠标滑过每一行时,该行就有高亮显示,前天写的时候感觉比较简单啊,就是在表格里面的tr加上一个hover样式就行,即是 tr:hover {...} ,这样就行了,当时也成功了.但是昨天项目又有调整,就是要给td一个背景色,我加上了背景色,当时没发现这个高亮的效果已经没了,晚上回来调试的时候老不行当时的想法是样式的优先

CSS3实现的圆形遮罩手机应用效果实例

<html> <head> <title>CSS3实现的圆形遮罩手机应用效果实例丨芯晴网页特效丨CsrCode.CN</title> <style> .trans { -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; } .tes

简单的鼠标拖动效果

使用js实现简单的鼠标拖动效果,但此部分代码有个小小的BUG,后期改进好我会写进来,但基本的效果已经实现,请大家参考. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移动</title> <style> #box{ width: 50px; height: 50px; position:

JS实现导航条效果——current跟随鼠标hover移动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

CSS实现DIV感应鼠标Hover时的显示隐藏效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现DIV感应鼠标Hover时的显示隐藏效果</title> <style> .wrap{} .wrap .box{border:2px solid red;width:200px;height:200px;float:left;margi

html5 figcaption和css3制作8种惊艳的图片标题hover效果

一款利用html5的figcaption标签和css3 3d transform,css3 transition等技术制作的图片标题hover效果,共有8种不同的惊艳效果. 下载演示地址

酷炫的css3图标loading动画效果代码

css3 svg图标制作环形loading加载动画特效 绿色的css3动画加载图标代码 css3加载动画制作loading加载Android动画效果 jQuery css3预加载动画制作css3动画图标页面加载效果 css3加载动画特效制作css3 win8加载动画特效 css3加载动画效果制作loading动画效果代码 8种超炫css3加载动画代码_css3 loading动画效果代码 5个CSS3加载动画_css3网页加载动画图标下载 css3 Loading加载动画制作动态Loading阶

css3 hover效果

html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } a { text-decoration: none; color: #

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

hover 效果能给网页增加一些动态效果,并且使得站点更具有活力.原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器 的支持,我们可以用纯粹的CSS代码来实现这些有趣的效果.所谓的现代浏览器,更多的是指以Mozilla和Webkit为核心的浏览器,IE的表现稍微 差强人意,所以请使用FireFox,Safari或者Chrome查看一下的效果.如下就是要介绍的5个非常酷的纯CSS hover 效果. 1. 向上跳跃 Click Here to Launch