2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

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

cssjavascript前端网站建设jquery作者:猿2048志愿者

动画效果如下遇新是直朋能到

 

代码如下:

 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    

 

本文来源于网络:查看 >
« 上一篇:视频文件列表hover添加视频播放按钮
» 下一篇:基于jqUI的日期选择(‘yy-mm-dd’)
评论
点击刷新
评论
相关博文

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2021-01-16中奖名单(每日10名)
×添加代码片段