css3控制div上下跳动
<!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上下跳动的更多相关文章
- css3控制div上下跳动-效果图
效果图演示,源代码
- CSS控制div宽度最大宽度/高度和最小宽度/高度
在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟 ...
- css控制div的各种形状
css控制div的各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用. 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可 ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Js控制Div在浏览器中的高度
//需求是,我需要通过浏览器内容可视化的高度来控制div的高度boxheight(); //执行函数function boxheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var wi ...
- PHP控制div块大小和颜色的例子
网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...
- js练习-控制div属性
要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
- 键盘控制div移动
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
随机推荐
- 使用NPOI导入导出标准Excel
尝试过很多Excel导入导出方法,都不太理想,无意中逛到oschina时,发现了NPOI,无需Office COM组件且不依赖Office,顿时惊为天人,怀着无比激动的心情写下此文. 曾使用过的方法 ...
- [翻译] 比较 Node.js,Python,Java,C# 和 Go 的 AWS Lambda 性能
[翻译] 比较 Node.js,Python,Java,C# 和 Go 的 AWS Lambda 性能 原文: Comparing AWS Lambda performance of Node.js, ...
- RobotFramework下的http接口自动化Set Request Header 关键字的使用
Set Request Header 关键字用来设置http请求时的请求头部信息. 该关键字接收两个参数,[ header_name | header_value ] 示例1:设置http请求时的Re ...
- BZOJ 1926: [Sdoi2010]粟粟的书架(主席树,二分答案)
BZOJ 1926: [Sdoi2010]粟粟的书架(主席树,二分答案) 题意 : 给你一个长为\(R\)宽为\(C\)的矩阵,第\(i\)行\(j\)列的数为\(P_{i,j}\). 有\(m\)次 ...
- 【BZOJ3506】排序机械臂(Splay)
[BZOJ3506]排序机械臂(Splay) 题面 神TMBZOJ没有题面,感谢SYC的题面 洛谷的题面也不错 题解 对于每次旋转的物体 显然可以预处理出来 现在只要模拟旋转操作就行了 至于在哪里放标 ...
- ZJOI2007仓库建设
斜率优化 # include <stdio.h> # include <stdlib.h> # include <iostream> # include <s ...
- 关于CI框架访问数据库类提示Call to undefined function mysqli_init()
大家好,我曾经是ASP.NET MVC的践行者,现在是PHP,同时也是CodeIgniter框架的初学者和践行者,当时由于项目原因,我被迫给自己打满鸡血,满怀激情的选用Yii2,Lavarel5,Co ...
- 【noip模拟】2048
Time limit: 1000ms Memory limits: 256MB Description 2048曾经是一款风靡全球的小游戏.今天,我们换一种方式来玩这个小游戏.现在, ...
- 如何降低90%Java垃圾回收时间?以阿里HBase的GC优化实践为例
过去的一年里,我们准备在Ali-HBase上突破这个被普遍认知的痛点,为此进行了深度分析及全面创新的工作,获得了一些比较好的效果.以蚂蚁风控场景为例,HBase的线上young GC时间从120ms减 ...
- php 创建和修改文件内容
file_put_contents写入文件 我们先来学习第一种写入文件的方式: int file_put_contents ( string $文件路径, string $写入数据]) 功能:向指定的 ...