动画效果如下：
代码如下：
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="images/jiantou.png" alt="" class="animate-bounce-down" /><img src="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