CSS3 示例：http://www.w3school.com.cn/cssref/pr_keyframes.asp

以下是代码：

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

-webkit-animation:mymove 5s; /* 不支持IE */

animation:mymove 5s;  　　　　/* 支持IE */

}

@-webkit-keyframes mymove /* Safari and Chrome */

{

0% {top:0px;}

20% {top:200px;}

40% {top:100px;}

60% {top:200px;}

80% {top:150px;}

100% {top:200px;}

}

@keyframes mymove

{

0% {top:0px;}

20% {top:200px;}

40% {top:100px;}

60% {top:200px;}

80% {top:150px;}

100% {top:200px;}

}

</style>

</head>

<body>

<div></div>

</body>

</html>

css控制div上浮下落的更多相关文章

  1. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. css控制div的各种形状

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

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

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

  4. css控制div等比高度

    在移动端开发中,在banner轮播图未加载出来之前,banner层是不占文档流高度的,当从服务器获取完banner数据,展示的时候,banner层因为有了内容 所以会撑开,导致banner层下面的内容 ...

  5. 用CSS控制DIV居中失效的解决方法

    1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  6. css控制div下图片自适应解决方法:图片不超过最大宽度

    我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...

  7. 前端学习笔记2017.6.12 CSS控制DIV

    前一篇文章中用div布局了豆瓣东西的页面,如果用html代码表示的话大概是这个样子的 <!DOCTYPE html><html><head></head> ...

  8. Css控制div水平垂直居中显示

    <style>#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}#center{background:#FF ...

  9. css控制div强制换行

    div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{word-br ...

随机推荐

  1. html to docx

    public static void main(String[] args) throws Exception{ //创建 POIFSFileSystem 对象 POIFSFileSystem poi ...

  2. 回溯法 leetcode题解 Combination Sum 递归法

    题目大意:给出一个数组,用这些数组里的元素去凑一个target.元素可以重复取用. 感觉对这种题目还是生疏的.脑子里有想法,但是不知道怎么表达出来. 先记录下自己的递归法.应该还可以用循环实现. 回溯 ...

  3. C++ new 和malloc 区别

    1.分配地方不同,malloc是堆上面,new是自由存储区域 2.malloc/delete是函数,new/delete是操作符,可以重载 3.malloc 要指定大小,返回的是void*指针,开辟的 ...

  4. 国内Maven仓库 - 2018年5月2日15:54:10

    <mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> & ...

  5. mysql分表实战

    本文主要讲述如何使用存储过程完成本表.并不讨论其他问题.首先我们得看看手册上关于meger引擎的说明: MERGE存储引擎,也被认识为MRG_MyISAM引擎,是一个相同的可以被当作一个来用的MyIS ...

  6. JAVA仿百度分页

    最近在做一个仿百度网盘的网页小应用,找到了一个优雅简洁的分页插件,和百度搜索的分页很相似,对他进行了二次封装,拿出来跟大家分享下 插件源码 /** * This jQuery plugin displ ...

  7. http://www.cnblogs.com/wuyunfei/p/4277226.html

    http://www.cnblogs.com/wuyunfei/p/4277226.html

  8. js高级-执行上下文

    全局上下文  方法1() 压入 (栈的数据结构 先进后出)push()  pop() 1.当一个函数在调用另外一个函数的时候新调用的函数会行成一个新的执行上下文 压入执行环境栈的栈顶 2.浏览器js执 ...

  9. vue 巧妙的运用sass px 转 rem

    <template> <div id="app"> <!-- <img src="./assets/logo.png"> ...

  10. php优化-》常用到的部分优化

    1.循环内部尽可能不要声明变量: 2.在可以用PHP内部字符串操作函数的情况下,尽量不要用正则表达式: 3.foreach效率更高,尽量用foreach代替while和for循环: 4.用单引号替代双 ...