CSS3制作上下跳动动画箭头效果

最新推荐文章于 2024-09-30 10:47:07 发布

weixin_30736301

最新推荐文章于 2024-09-30 10:47:07 发布

阅读量1.3k

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/webdom/p/9930611.html

版权

动画效果如下：

代码如下：

 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