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>
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制作上下跳动动画箭头效果的更多相关文章
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
- css3制作左右拉伸动画菜单
微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...
- 利用CSS3制作淡入淡出动画效果
CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...
- css3制作惊艳hover切换效果
css3制作经验hover切换效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8" ...
- 使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
- 纯CSS3制作皮卡丘动画壁纸
前言 明天就放假了,趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果.话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以 ...
- 分针网—IT教育：使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...
- css3 制作平滑过度动画
-webkit-transition(属性渐变) -webkit-transition:CSS属性(none|all|属性) 持续时间 时间函数 延迟时间 CSS属性(transition-pr ...
- css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
随机推荐
- MIP 技术进展月报：储存功能全新上线，MIP-Cache域名升级，校验更严谨
集 ** 瞬时触达用户.高转化率.炫酷闪电标.优质展现形式 ** 等诸多特性为一体的 MIP 页面吸引了众多站点进行改造.为了更好地服务于广大站长,更快地倾听站长们的声音,MIP 技术团队特推出< ...
- MIPCache 域名升级
一.MIPCache URL 是什么 举个例子,MIP 官网的 URL 为: https://www.mipengine.org 对应的 MIPCache 的 URL 为: https://mipca ...
- C# 通俗说 哈希表
1.何谓哈希 哈希,也程散列.哈希表是一种与数组,链表等不同的数据结构,与他们需要不断的 遍历比较查找的办法,哈希表设计了一个映射关系发f(key)=adress,根据key来计算adress, 这样 ...
- 六大设计原则（二）LSP里氏替换原则
里氏替换原则LSP(Liskov Subsituation Principle) 里氏替换原则定义 所有父类出现的地方可以使用子类替换并不会出现错误或异常,但是反之子类出现的地方不一定能用父类替换. ...
- Vue.js 学习笔记 第5章 内置指令
本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...
- 基于Vue2-Calendar改进的日历组件（含中文使用说明）
一,前言 我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅…… 于是网上搜了好久找到了 ...
- 提升机器学习数学基础，这7本书一定要读-附pdf资源
文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 来源 | KDnuggets 作者 | Ajit Jaokar 转自 | 新智元 编辑 | 大明 [编 ...
- 联发科Helio P90(mt6779),P70(mt6775),P60(MT6771),P35,P22(MT6762)芯片参数规格
Helio P90(mt6779)是一款人工智能处理平台,集成了超级强大的AI专核APU 2.0,具有超强的AI性能和一系列基于人工智能的成像升级.该芯片将重新定义消费者对智能手机AI功能的体验.He ...
- CDN工作机制和负载均衡
定义: CDN 即内容分布网络,(Content Delivery Netwrok) ,是构筑在现有Internet上的一种先进的流量分配网络,其目的是通过在现有的Internet中增加一层新的网络 ...
- c语言总练习题
!4,42 ?45 1 Description 键盘输入一个双精度数据,乘以2以后输出 Input 输入一个double型数据 Output 输出它的两倍数,结果保留8位小数 Sample Input ...