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 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
随机推荐
- 手写事件代理函数 （Delegated function）
‘手写 ’ 这个词 ,面试是不是听过无数遍呢 ! 今天我们来手写一个这样的事件委托函数 => function( parent, selector, type , handle) {} 你需 ...
- 前端笔记之Vue（二）组件&案例&props&计算属性
一.Vue组件(.vue文件) 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器 ...
- 看板记录工具wekan
wekan 1. 功能 看板工具 2. 安装 环境: centos7.4 安装链接 snap方式 安装脚本(root用户) #!/bin/bash yum makecache fast yum ins ...
- 强化学习(十二) Dueling DQN
在强化学习(十一) Prioritized Replay DQN中,我们讨论了对DQN的经验回放池按权重采样来优化DQN算法的方法,本文讨论另一种优化方法,Dueling DQN.本章内容主要参考了I ...
- 游戏AI之感知（1）
目录 感知 视觉感知 听力感知 其它感知 实现 感知 视觉感知 视觉感知是一种常见的感知. 在许多即时战略游戏或者类DOTA游戏里,一个单位的视觉感知往往是圆形范围的. 当然在其他大部分俯视角游戏里, ...
- Android中一个经典理解误区的剖析
今天,在Q群中有网友(@广州-包晴天)发出了网上的一个相对经典的问题,问题具体见下图. 本来是无意写此文的,但群里多个网友热情不好推却,于是,撰此文予以分析. 从这个问题的陈述中,我们发现,提问者明显 ...
- 第4章 令牌端点(Token Endpoint) - IdentityModel 中文文档(v1.0.0)
令牌端点的客户端库(OAuth 2.0和OpenID Connect)作为HttpClient一组扩展方法提供.这允许HttpClient以您喜欢的方式创建和管理生命周期- 例如静态或通过像Micro ...
- Dynamics 365 CE的插件/自定义工作流活动中调用Web API示例代码
微软动态CRM专家罗勇 ,回复325或者20190428可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! 现在Web API越来越流行,有时候为了程序更加健壮,需要在插件 ...
- 在Hyper-V上安装RemixOS 的Android模拟器
不想用实体机,想不想弄个快速的Android虚拟环境,今天我们就来说说把Android模拟器(RemixOS)安到Hyper-v上的办法. 1. 下载RemixOs 或者直接去 论坛获得下载地址 2 ...
- MSSQL2008 R2 数据库展开报错:值不能为空 参数名:viewInfo
打开数据库时报错,提示应用程序组件中发生了无法处理的异常.如果单击“继续”,应用程序将忽略此错误并尝试继续. 针对此类问题的解决办法是:将路径C:\Documentsand Settings\Admi ...