CSS3制作上下跳动动画箭头效果
动画效果如下：
代码如下：
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>
js控制css3动画触发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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。