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. 尚硅谷redis学习5-初识redis.conf

    redis.conf是redis的配置文件,在解压后的redis安装文件夹下 单位 1  配置大小单位,开头定义了一些基本的度量单位,只支持bytes,不支持bit    2  对大小写不敏感 包含 ...

  2. C语言复习：指针知识

    指针知识体系搭建 指针强化 指针是一种数据类型 指针也是一种变量,占有内存空间,用来保存内存地址 测试指针变量占有内存空间大小:sizeof(指针名); 2)*p操作内存 在指针声明时,*号表示所声明 ...

  3. [PHP]json_encode增加options参数后支持中文

    ---------------------------------------------------------------------------------------------------- ...

  4. Android签名

    参考文档:http://blog.csdn.net/u010316858/article/details/53159678 http://www.cnblogs.com/wanqieddy/p/355 ...

  5. BlurZoomGallery一个完美下拉进入大图模式

    BlurZoomGallery一个完美的Gallery和view的事件处理,下拉放大的时候gallery不断的在添加高度,gallery效果在放大,实现下拉进入大图模式,view滑动事件和galler ...

  6. python脚本

    python源码编译 python -O -m py_compile file.py [root@localhost python]# cat dbass.py #!/usr/local/bin/py ...

  7. Centos7.x Docker桥接网络

    基于Centos7.x构建Docker桥接网络, 配置bridge桥接网络可以直接设置网卡配置文件: 自定义桥接网络设置如下: 关掉docker0 ifconfig docker0 down 删除do ...

  8. Docker虚拟化平台

    1.虚拟化技术的概念 1)虚拟化就是把物理资源转变为逻辑上可以管理的资源,以打破物理结构间的壁垒,让计算机的元件运行在虚拟的基础上,而不是真实的物理设备: 2)虚拟化技术可以将物理机硬件资源虚拟生成单 ...

  9. 学JS的心路历程-函式（四）apply、call

    从上一篇可以知道,不同的函式呼叫会造成this的不同,但我们能不能在呼叫时候明确指定呢? 当然可以.会有这个想法是因为往往在执行某支函式时想要用回呼函式(mizumisushi),但发现this总是显 ...

  10. 03_java基础（一）之计算机应用知识普及

    1.计算机(Computer) 全称:电子计算机,俗称电脑.是一种能够按照程序运行,自动.高速处理海量数据的现代化智能电子设备.由硬件和软件所组成,没有安装任何软件的计算机称为裸机.常见的形式有台式计 ...