CSS3实现晃动的引导箭头-百度新首页
Demo
预览：http://xuanfengge.com/demo/201406/guide/
效果图：
实现
箭头其实就是一张图片，然后用2个相同的DOM元素，利用CSS的缩放动画，使其中一个元素延迟发生动画，2个图片间隔的闪烁，即可实现出晃动的效果。具体代码如下：
HTML
|
2 |
<
a
class
=
"s-xguide-down trans"
href
=
"http://www.baidu.com/"
onclick
=
"return false;"
hidefocus
=
""
>
<
/
a
>
<
a
class
=
"s-xguide-down arrow-1 trans"
href
=
"http://www.baidu.com/"
onclick
=
"return false;"
hidefocus = "" > < / a > |
CSS
.
s
-
xguide
-
down
{
width
:
50px
;
height
:
50px
;
display
:
inline
-
block
;
position
:
fixed
;
bottom
:
80px
;
left
:
50
%
;
background
:
url
(
"./s_xman_guide_f3aebfe5.png"
)
no
-
repeat
-
21px
-
3px
;
_background
:
none
;
_filter
:
progid
:
DXImageTransform
.
Microsoft
.
AlphaImageLoader
(
src
=
"./s_xguide_down_ie_a343e020.png"
,
enabled
=
true
,
sizingMethod
=
"crop"
)
;
border
-
radius
:
50
%
;
-
moz
-
border
-
radius
:
50
%
;
-
webkit
-
border
-
radius
:
50
%
;
-
o
-
border
-
radius
:
50
%
;
opacity
:
.
7
;
cursor
:
pointer
}
@
keyframes
xguide_down
{
0
%
,
100
%
{
transform
:
scale
(
0.0
)
;
-
moz
-
transform
:
scale
(
0.0
)
;
-
o
-
transform
:
scale
(
0.0
)
;
-
webkit
-
transform
:
scale
(
0.0
)
;
-
ms
-
transform
:
scale
(
0.0
)
;
opacity
:
0
}
50
%
{
transform
:
scale
(
1.0
)
;
-
moz
-
transform
:
scale
(
1.0
)
;
-
o
-
transform
:
scale
(
1.0
)
;
-
webkit
-
transform
:
scale
(
1.0
)
;
-
ms
-
transform
:
scale
(
1.0
)
;
opacity
:
1
}
}
@
-
webkit
-
keyframes
xguide_down
{
0
%
,
100
%
{
-
webkit
-
transform
:
scale
(
0.0
)
;
-
moz
-
transform
:
scale
(
0.0
)
;
-
o
-
transform
:
scale
(
0.0
)
;
-
ms
-
transform
:
scale
(
0.0
)
;
transform
:
scale
(
0.0
)
;
opacity
:
0
}
50
%
{
-
webkit
-
transform
:
scale
(
1.0
)
;
-
moz
-
transform
:
scale
(
1.0
)
;
-
o
-
transform
:
scale
(
1.0
)
;
-
ms
-
transform
:
scale
(
1.0
)
;
transform
:
scale
(
1.0
)
;
opacity
:
1
}
}
@
-
moz
-
keyframes
xguide_down
{
0
%
,
100
%
{
-
moz
-
transform
:
scale
(
0.0
)
;
-
o
-
transform
:
scale
(
0.0
)
;
-
webkit
-
transform
:
scale
(
0.0
)
;
-
ms
-
transform
:
scale
(
0.0
)
;
transform
:
scale
(
0.0
)
;
opacity
:
0
}
50
%
{
-
moz
-
transform
:
scale
(
1.0
)
;
-
o
-
transform
:
scale
(
1.0
)
;
-
webkit
-
transform
:
scale
(
1.0
)
;
-
ms
-
transform
:
scale
(
1.0
)
;
transform
:
scale
(
1.0
)
;
opacity
:
1
}
}
@
-
o
-
keyframes
xguide_down
{
0
%
,
100
%
{
-
o
-
transform
:
scale
(
0.0
)
;
-
moz
-
transform
:
scale
(
0.0
)
;
-
webkit
-
transform
:
scale
(
0.0
)
;
-
ms
-
transform
:
scale
(
0.0
)
;
transform
:
scale
(
0.0
)
;
opacity
:
0
}
50
%
{
-
o
-
transform
:
scale
(
1.0
)
;
-
moz
-
transform
:
scale
(
1.0
)
;
-
webkit
-
transform
:
scale
(
1.0
)
;
-
ms
-
transform
:
scale
(
1.0
)
;
transform
:
scale
(
1.0
)
;
opacity
:
1
}
}
.
s
-
xguide
-
down
.
trans
{
-
webkit
-
animation
:
xguide
_down
4.0s
infinite
ease
-
in
-
out
;
-
moz
-
animation
:
xguide
_down
4.0s
infinite
ease
-
in
-
out
;
-
o
-
animation
:
xguide
_down
4.0s
infinite
ease
-
in
-
out
;
animation
:
xguide
_down
4.0s
infinite
ease
-
in
-
out
}
.
s
-
xguide
-
down
.
arrow
-
1
{
animation
-
delay
:
-
2.0s
;
-
webkit
-
animation
-
delay
:
-
2.0s
;
-
moz
-
animation
-
delay
:
-
2.0s
;
-
o
-
animation
-
delay
:
-
2.0s
}
CSS里面，主要用到了CSS3的@keyframes生成动画，利用transform变换中的scale缩放变形，及配合透明度实现。对于IE，则只显示图片，没有动画并无其他影响。
CSS里面，主要用到了CSS3的@keyframes生成动画，利用transform变换中的scale缩放变形，及配合透明度实现。对于IE，则只显示图片，没有动画并无其他影响。