动画效果如下：

代码如下：

 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. 补习系列(20)-大话 WebSocket 与 "尬聊"的实现

    目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参 ...

  2. Mac PyCharm激活码（转载CSDN的猪哥66文章）

    对于很多刚接触python的新手来说,各种资源都是非常稀缺的.我也是刚接触python不久的新手,有好的资源就分享出来大家共同进步. 这篇文章是教你怎么安装和破解pycharm的教程,我在2019.4 ...

  3. jdk源码阅读笔记-AbstractStringBuilder

    AbstractStringBuilder 在java.lang 包中,是一个抽象类,实现 Appendable 接口和 CharSequence 接口,这个类的诞生是为了解决 String 类在创建 ...

  4. asp.net core系列 55 IS4结合Identity密码保护API

    一.概述 OAuth 2.资源所有者密码授权允许客户端(Client项目)向令牌服务(IdentityServer项目)发送用户名和密码,并获取代表该用户的访问令牌.本篇将IS4结合asp.net c ...

  5. Git常用命令拾遗

    git三个区 下图是git的提交流程,是入门或者说是理解git的重要图谱. 我们可以看到这里有三个区:工作区.暂存区.提交区.截止到commit阶段,其实都只是在本地离线操作,真正同步到中心服务器,需 ...

  6. AES加密然后ajax传输数据

    最近做的一个项目,需要对传输的参数进行aes加密,所以就顺便的了解了一下,因为这种东西,肯定都是有写好的,现成的,所有这里就简单的记录一下,方便以后自己和大家查找. 首先附上百度的关于AES的百度百科 ...

  7. 关于thinkphp5手动抛出Http异常时自定义404页面报错的问题

    在使用HttpException手动抛出异常时,希望跳转到自定义的错误页面,官方的文章中是这样描述的. 可以使用\think\exception\HttpException类来抛出异常 // 抛出 H ...

  8. 全球第一免费开源ERP Odoo WMS库存管理高级路线设置详解

    概览 路线就是推规则和拉规则的合并整理.Odoo可以配置高级推/拉路线的配置, 例如 : 管理产品的制造链条 为每个产品管理默认位置 根据业务需求在仓库中定义路线, 例如质检, 售后和供应商退货 租用 ...

  9. SQL server 表信息查询

    一.查看所有表的行数select a.name as '表名',b.rows as '表数据行数'from sysobjects a inner join sysindexes bon a.id = ...

  10. Abp通用配置模块的设计

    引言 约定优于配置,配置趋于灵活 约定优于配置(convention over configuration),也称作按约定编程,是一种软件设计范式,旨在减少软件开发人员需做决定的数量,获得简单的好处, ...