<!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. com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown database 'smvch'

    1.错误描述 INFO:2015-05-01 14:20:44[main] - Initializing c3p0 pool... com.mchange.v2.c3p0.ComboPooledDat ...

  2. Angular21 动态绑定CSS样式

    1 需求 在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指 ...

  3. SpringMVC国际化支持

    这周公司领导希望我对一个项目,出一个国际化的解决方案,研究两个小时,采用了SpringMVC的国际化支持,在此记录下. 原理: 在DispatchServlet中注册localeResolver(区域 ...

  4. 对于多线程下Servlet以及Session的一些理解

    今天,小伙伴突然问到了Servlet是不是线程安全的问题.脑子当时一卡壳,只想到了单实例多线程.这里做一些总结. Servlet体系是建立在Java多线程的基础之上的,它的生命周期是由Tomcat来维 ...

  5. Postgresql基本用法以及优化注意

    本篇为之前学习PG数据库一些基本操作使用以及优化注意. 比较运算符  = :  <>,!=,<= , <,>=,>: 不能用于null判断; Between: Le ...

  6. 第十篇：K均值聚类(KMeans)

    前言 本文讲解如何使用R语言进行 KMeans 均值聚类分析,并以一个关于人口出生率死亡率的实例演示具体分析步骤. 聚类分析总体流程 1. 载入并了解数据集:2. 调用聚类函数进行聚类:3. 查看聚类 ...

  7. webpack中hash与chunkhash区别和需要注意的问题

    项目发布时,为了解决缓存,需要进行md5签名,这时候就需要用到 hash 和 chunkhash等. 问题一:hash问题 使用 hash 对js和css进行签名时,每一次hash值都不一样,导致无法 ...

  8. JVM学习笔记一：Java运行时数据区域

    1. 程序计数器 当前线程所执行的字节码的行号指示器. 2. Java虚拟机栈 线程私有,与线程具有相同生命周期.用于存储局部变量表.操作数栈.动态链表.方法出口等信息. 局部变量表存放内容: 基本数 ...

  9. linux的基本操作命令

    linux的基本命令操作: 1.什么是Linux  是一个OS,是Unix克隆版2.命令的基本格式:  命令  [选项]...  [参数]...        //格式  ls             ...

  10. Rotational Region CNN

    R2CNN 论文Rotational Region CNN for Orientation Robust Scene Text Detection与RRPN(Arbitrary-Oriented Sc ...