css3 箭头动态效果,CSS3制作上下跳动动画箭头效果
动画效果如下：
代码如下：
1
2
3
4
5
欢迎关注-勇淘未来6
7
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
29
30
31
32
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
48
49
50
学习使用 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切换效果
使用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 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
随机推荐
七天学会ASP.NET MVC(七)——创建单页应用
系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...
simpleCart的简单使用及配置
simpleCart的功能就不用解释,购物车,很6.官网上的说明太模糊了,还是GIHUb上的好一点:https://github.com/wojodesign/simplecart-js/ 文章解决问 ...
mysql event
1.定时调用 存储过程 DELIMITER $$ ALTER DEFINER=`root`@`localhost` EVENT `event_stroke_ArchivesReportDataRefr ...
Love
愿这段代码陪我走过此生,献给我最爱的榨菜. /** *@Description:
我爱榨菜
*@author 王旭 *@time 2016年4月25日 下午7:58 ...[转]windows下srand48()和drand48()的问题
转自:windows下srand48()和drand48()的问题 #ifndef DRAND48_H #define DRAND48_H #include #def ...
团队项目第二阶段个人进展——Day6
一.昨天工作总结 冲刺第六天,学习了leancloud的一些数据处理知识,并看了如何在微信小程序中使用 二.遇到的问题 无 三.今日工作规划 通过动手完成一个demo来学习后端数据的请求和响应
mac上安装memcache
1. 安装 brew (http://brew.sh/) /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/H ...
Python swapcase
swapcase 字符串大写转换为小写小写转换为大写. a = "woHaoshuai" a.swapcase() WOhAOSHUAI
Unity 代码 学习
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A: B: using System; using System.Runtime.Compile ...
使用DOM的方法获取所有li元素，然后使用jQuery()构造函数把它封装为jQuery对象