动画效果如下:

代码如下:

 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

CSS3制作上下跳动动画箭头效果的更多相关文章

  1. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  2. css3制作左右拉伸动画菜单

    微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...

  3. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  4. css3制作惊艳hover切换效果

    css3制作经验hover切换效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8" ...

  5. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  6. 纯CSS3制作皮卡丘动画壁纸

    前言 明天就放假了,趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果.话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以 ...

  7. 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...

  8. css3 制作平滑过度动画

    -webkit-transition(属性渐变) -webkit-transition:CSS属性(none|all|属性)  持续时间  时间函数  延迟时间 CSS属性(transition-pr ...

  9. css3制作炫酷导航栏效果

    今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

随机推荐

  1. Logistic回归(逻辑回归)和softmax回归

    一.Logistic回归 Logistic回归(Logistic Regression,简称LR)是一种常用的处理二类分类问题的模型. 在二类分类问题中,把因变量y可能属于的两个类分别称为负类和正类, ...

  2. Java集合详解7:HashSet,TreeSet与LinkedHashSet

    今天我们来探索一下HashSet,TreeSet与LinkedHashSet的基本原理与源码实现,由于这三个set都是基于之前文章的三个map进行实现的,所以推荐大家先看一下前面有关map的文章,结合 ...

  3. DSAPI多功能.NET函数库组件

    DSAPI.dll不定期更新,增加功能,故无法每次都发到网上,如果需要获得最新版DSAPI.dll的,请到QQ群:419130936群共享里下载. 简介     dsapi.dll是一款基于.net平 ...

  4. pod command

    pod 基础使用命令 创建Podfile文件 1 pod init 使用命令打开Podfile文件 1 open -a Xcode Podfile 搜索pod 库 1 pod search 库名 更新 ...

  5. 函数声明 和 var声明的优先级

    function demo() { console.log(5) } var demo = function(){ console.log(4) } console.log(demo()) var d ...

  6. Linux内存管理 (5)slab分配器

    专题:Linux内存管理专题 关键词:slab/slub/slob.slab描述符.kmalloc.本地/共享对象缓冲池.slabs_partial/slabs_full/slabs_free.ava ...

  7. Cocos Creator—如何给资源打MD5版本号

    Cocos Creator 是Cocos最新一代的游戏开发者工具,基于 Cocos2d-x,组件化,脚本化,数据驱动,跨平台发布.Cocos Creator的开发思路已经逐步跟Unity 3D靠拢,写 ...

  8. ML.NET 发布0.11版本:.NET中的机器学习,为TensorFlow和ONNX添加了新功能

    微软发布了其最新版本的机器学习框架:ML.NET 0.11带来了新功能和突破性变化. 新版本的机器学习开源框架为TensorFlow和ONNX添加了新功能,但也包括一些重大变化, 这也是发布RC版本之 ...

  9. Java遍历Map的4种方式

    public static void main(String[] args) { // 循环遍历Map的4中方法 Map<Integer, Integer> map = new HashM ...

  10. 爬虫须知的HTTP协议

    HTTP请求: 1.HTTP请求主要分为"Get"和"Post"两种方法. 2.当我们在浏览器输入URL http://www.baidu.com 的时候, 浏 ...