本教程將和大將分享一些簡單的圓形圖標在鼠標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