动画效果如下：
代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>欢迎关注-勇淘未来</title>
6 <script src="js/jquery-1.8.3.min.js"></script>
7 <style>
8 /*黑色半圆是图片，上下箭头也是图片*/
9 .footer_btn{text-align:center;line-height:47px;}
11 @keyframes bounce-down {
12 25% {transform: translateY(-3px);}
13 50%{transform: translateY(0);}
14 75% {transform: translateY(3px);}
15 100% {transform: translateY(0);}
16 }
17 .animate-bounce-down{ -webkit-animation: bounce-down 1s linear infinite;animation: bounce-down 1s linear infinite;
18 }
19
20 @keyframes bounce-down1 {
21 25% {transform: translateY(-3px);}
22 50%, 100% {transform: translateY(0);}
23 75% {transform: translateY(3px);}
24 }
25 .animate-bounce-down1{display:none;-webkit-animation: bounce-down 1s linear infinite;animation: bounce-down 1s linear infinite;
26 }
28 </style>
29 </head>
30 <body>
31 <div class="footer_btn"><img src="data:images/jiantou.png" alt="" class="animate-bounce-down" /><img src="data:images/jiantou1.png" alt="" class="animate-bounce-down1" /></div>
32 <script>
33 var flag=true;
34 $(".footerBox").click(function(){
35
36 if(flag == true){;
37 $(".animate-bounce-down1").css("display","inline-block");
38 $(".animate-bounce-down").css("display","none");
39 flag=false;
40 }else{
41 $(".animate-bounce-down").css("display","inline-block");
42 $(".animate-bounce-down1").css("display","none");
43 flag=true;
44 }
45 $(this).find(".footer_content").stop().slideToggle(500);
46 });
47 </script>
48 </body>
49 </html>
50