<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style type="text/css">

 @-webkit-keyframes bounce-down {

  25% {-webkit-transform: translateY(-10px);}

  50%, 100% {-webkit-transform: translateY(0);}

  75% {-webkit-transform: translateY(10px);}

 }

 @keyframes bounce-down {

  25% {transform: translateY(-10px);}

  50%, 100% {transform: translateY(0);}

  75% {transform: translateY(10px);}

 }

 .animate-bounce-down{ background:#333; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-down 1.5s linear infinite;animation: bounce-down 1.5s linear infinite;

 }

 @-webkit-keyframes bounce-up {

  25% {-webkit-transform: translateY(10px);}

  50%, 100% {-webkit-transform: translateY(0);}

  75% {-webkit-transform: translateY(-10px);}

 }

 @keyframes bounce-up {

  25% {transform: translateY(10px);}

  50%, 100% {transform: translateY(0);}

  75% {transform: translateY(-10px);}

 }

 .animate-bounce-up{ background:#ddd; width: 100px; height: 100px; margin:100px auto;-webkit-animation: bounce-up 1.4s linear infinite;animation: bounce-up 1.4s linear infinite;}

 </style>

 </head>

 <body>

 <div class="animate-bounce-up"></div>

 <div class="animate-bounce-down"></div>

 </body>

 </html>

这个例子是直接应用css3来控制div层上下来回滚动；

这需要熟练应用@keyframes 规则，@keyframes bounce-up中的bounce-up是个动作名称，这个元素可以自行定义，只要在 animation: bounce-up匹配到就可以的。

这是效果图

css3控制div上下跳动的更多相关文章

  1. css3控制div上下跳动-效果图

    效果图演示,源代码    

  2. CSS控制div宽度最大宽度/高度和最小宽度/高度

    在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟 ...

  3. css控制div的各种形状

    css控制div的各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用. 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可 ...

  4. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Js控制Div在浏览器中的高度

    //需求是,我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var wi ...

  6. PHP控制div块大小和颜色的例子

    网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...

  7. js练习-控制div属性

    要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...

  8. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  9. 键盘控制div移动

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

随机推荐

  1. css补充

    (一)水平对齐1.使用margin属性水平对齐可通过将左和右外边距设置为 "auto",来对齐块元素.除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 ...

  2. PhotoShop制作简单的文字动画--多媒体技术与应用

    下面是最终实现的效果图: 1.新建图像,设置图像属性如下所示. 2.使用[横排文字工具]在背景图像上打上文字内容 3.[图层]——>[图层式样]——>[渐变叠加] 出现“图层样式”面板 4 ...

  3. SpringBoot集成Shiro并用MongoDB做Session存储

    之前项目鉴权一直使用的Shiro,那是在Spring MVC里面使用的比较多,而且都是用XML来配置,用Shiro来做权限控制相对比较简单而且成熟,而且我一直都把Shiro的session放在mong ...

  4. 【BZOJ1084】最大子矩阵（动态规划）

    [BZOJ1084]最大子矩阵(动态规划) 题面 题目描述 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. 输入输出格式 输入格式 ...

  5. PHP之工厂方法模式（三）

    定义 ​ 定义一个用于创建对象的接口(抽象工厂类),让子类决定实例化哪一个类,工厂方法使得一个类的实例化延迟到其子类(抽象工厂类的子类). ​ 工厂方法模式是简单工厂模式的进一步抽象和推广.在简单工厂 ...

  6. 【Spring源码分析】非懒加载的单例Bean初始化过程（上篇）

    代码入口 上文[Spring源码分析]Bean加载流程概览,比较详细地分析了Spring上下文加载的代码入口,并且在AbstractApplicationContext的refresh方法中,点出了f ...

  7. python操作excel常用的方法

    读操作模块安装 pip install xlrd 写操作模块安装 pip install xlwt xlrd读操作 1.打开excel xl = xlrd.open_workbook('test.xl ...

  8. 浅析git

    git是什么 简单来说,Git,它是一个快速的 分布式版本控制系统 (Distributed Version Control System,简称 DVCS) . 同传统的 集中式版本控制系统 (Cen ...

  9. python 数据结构简介

    栈(stack) 定义: 数据集合,只能在一端(首尾)进行删除和插入的列表. 特点: 后进先出(LIFO) 典型作用: 括号匹配:左括号进栈,右括号跟左括号对应则出栈,例如:(({{[]}}))匹配 ...

  10. Storm 入门的Demo教程

    Strom介绍 Storm是Twitter开源的分布式实时大数据处理框架,最早开源于github,从0.9.1版本之后,归于Apache社区,被业界称为实时版Hadoop.随着越来越多的场景对Hado ...