<!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. g++基本用法

    用法:g++[选项]文件... g++编译流程: main.cxx #include <iostream> using namespace std; int main(void) { co ...

  2. freemarker之list遍历（八）

    1.设置数据源 /** * * @Title:student * @Description: * @param:@param name * @return: void * @throws */ pri ...

  3. PyCharm运行报编码错误

    运行报如下错误: SyntaxError: Non-ASCII character '\xe8' in file /home/ubuntu/code/201803091253-text.py on l ...

  4. RobotFramework下的http接口自动化Follow Response关键字的使用

    Follow Response 关键字用于处理http中的重定向请求,常见的http 重定向请求包含http code为301和302 两种重定向请求,代表着某个URL地址发生了转移. http co ...

  5. 【BZOJ2434】阿狸的打字机（AC自动机，树状数组）

    [BZOJ2434]阿狸的打字机(AC自动机,树状数组) 先写个暴力: 每次打印出字符串后,就插入到\(Trie\)树中 搞完后直接搭\(AC\)自动机 看一看匹配是怎么样的: 每次沿着\(AC\)自 ...

  6. NOIp2017 滚粗记

    NOIp2017 滚粗记 Day0 早上 早自习的时候,班主任忽然告诉我们, 我们要参加期中考试... 这对于我们真是一个沉重的打击... 但是,管不着了 明天就死去考试了 上午 \(8:10\)到了 ...

  7. 【BZOJ4195】【NOI2015】程序自动分析（并查集）

    [BZOJ4195][NOI2015]程序自动分析(并查集) 题面 Description 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设 ...

  8. 【BZOJ1058】【ZJOI2007】报表统计（链表，堆，Splay）

    [BZOJ1058][ZJOI2007]报表统计 题面 题目描述 Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工作,作为她的生日礼物之一. 经过仔细观 ...

  9. linux开机启动流程及需要开机启动服务讲解和修改及防火墙

    linux系统从开机到登陆的启动流程. 1.开机BIOS自检 2.MBR引导 3.grub引导菜单 4.加载内核kernel 5.启动init进程 6.读取inittab文件,执行rc.sysinit ...

  10. Zabbix 微信报警Python版（带监控项波动图片）

    #!/usr/bin/python # -*- coding: UTF- -*- #Function: 微信报警python版(带波动图) #Environment: python import ur ...