本教程将和大将分享一些简单的圆形图标在鼠标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.2
s, color
0.2
s;
}
.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
2
s linear infinite;
}
@keyframes spinAround {
from {
transform
:
rotate
(
0
deg)
}
to {
transform
:
rotate
(
360
deg);
}
}
|
注意：第四个例子中使用伪元素制作虚线边框的效果在FF 21.0中看不到效果。
其它各种效果请参考下载的css文件，都非常简单。
本教程就到这里，希望对你有所帮助。
本文版权属于jQuery之家，转载请注明出处：
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141028314.html