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，则只显示图片，没有动画并无其他影响。