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显示/隐藏方法及2种方法比较原码 - 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. tp5中ajax方式提交表单

    用ajax提交表单,迅速,快捷,实现页面无刷新提交表单. <!DOCTYPE html> <html lang="en"> <head> < ...

  2. APP-1-相关介绍及资料

    一年前研究了下MUI框架,也做了一些简单的功能,将整个过程整理下.. 1.Hbuilder官网 http://www.dcloud.io/ 2.MUI前端框架 http://www.dcloud.io ...

  3. Java重写equals方法(重点讲解)

    为什么equals()方法要重写? 判断两个对象在逻辑上是否相等,如根据类的成员变量来判断两个类的实例是否相等,而继承Object中的equals方法只能判断两个引用变量是否是同一个对象.这样我们往往 ...

  4. 更新package.json中的dependencies依赖到最新版本 -

    我们从别人那里下载一个项目 ,通过package.json里面的依赖 npm  install 来安装所需要的各个包 但是 有可能项目很老,我们一个个更新又很麻烦所以 https://blog.csd ...

  5. C# 反射获取所有视图

    原地址:忘了 controller 的 action 加上属性 [System.ComponentModel.Description("菜单列表")]  且  返回值为 Syste ...

  6. 吴裕雄 python oracle子查询的用法(3)

    import cx_Oracle conn = cx_Oracle.connect("scott/admin@localhost:1521/orcl")cursor = conn. ...

  7. 2018面向对象程序设计(Java)第1周学习指导及要求

    2018面向对象程序设计(Java) 第1周学习指导及要求(2018.8.24-2018.9.2)   学习目标 了解课程上课方式及老师教学要求,掌握课程学习必要的软件工具: 简单了解Java特点及历 ...

  8. pipy国内镜像的网址

    pipy国内镜像目前有:豆瓣 http://pypi.douban.com/simple/阿里云 http://mirrors.aliyun.com/pypi/simple/中国科技大学 https: ...

  9. The CHAR and VARCHAR Types

    [The CHAR and VARCHAR Types] The CHAR and VARCHAR types are declared with a length that indicates th ...

  10. MAT eclipse内存分析工具

      启动的时候提示: Failed to load the JNIshared library 解决办法: 查看配置文件:MemoryAnalyzer.ini --launcher.librarypl ...