<!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. GStreamer 简化 Linux 多媒体开发

    Streamer 是 GNOME 桌面环境下用来构建流媒体应用的开源多媒体框架(framework),其目标是要简化音/视频应用程序的开发,目前已经能够被用来处理像 MP3.Ogg.MPEG1.MPE ...

  2. ASP.NET性能调试

    该文转自mx5721的博客:http://blog.csdn.net/mx5721/article/details/9138135 设计考虑 性能和安全的考虑 应用程序逻辑划分的考虑:逻辑分层,然后使 ...

  3. Ajax跨域解决实例

    HTML 在本例中我们跨域http://www.sucaihuo.com/jquery/demo/43/jsonp.php?callback=.你也可以试试其他域名.下面表单中,我们提交后的结果反馈到 ...

  4. studio设置File Templates

    从项目的整体风格考虑,对所有类要进行必要的说明,就注释说明来说首先需要说明是作者,文件创建时间,业务功能说明,这几项是基本的内容,而添加这些说明内容以前可能手动的添加文件标题头,这种做法现在都非常过时 ...

  5. span是没有value标签的，要向获得标签内部的值改怎么办。

    1,js实现 var div = document.getElementById('divId');var spans = div.getElementsByTagName('span');var s ...

  6. IOS开发之App被拒原因

    新手入门,简单记录一下Ipa提交给苹果公司后,有可能会被驳回的原因,欢迎补充和纠正! 原因: 1.ipa功能缺陷,譬如不能正常登陆.界面打不开.支付调不起等测试过程中未发现的Bug,实在是不应该!!! ...

  7. python利用jieba进行中文分词去停用词

    中文分词(Chinese Word Segmentation) 指的是将一个汉字序列切分成一个一个单独的词. 分词模块jieba,它是python比较好用的分词模块.待分词的字符串可以是 unicod ...

  8. 【BZOJ3531】旅行（树链剖分，线段树）

    [BZOJ3531]旅行(树链剖分,线段树) 题面 Description S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足 从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教 ...

  9. [SCOI2016]美味

    按位从高往低贪心,枚举到第i位,只需要判断这2^i长度的区间是否有菜,用主席树就可以了 # include <bits/stdc++.h> # define RG register # d ...

  10. STM32高级定时器TIM1产生两路互补的PWM波（带死区）

    测试环境:Keil 5.20.0.0 STM32F103RBT6 固件库版本:STM32F10x_StdPeriph_Lib_V3.5.0(2011) 本文使用TIM1的通道1,通道2,产生两路1kh ...