css控制div上浮下落
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上浮下落的更多相关文章
- css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- css控制div的各种形状
css控制div的各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用. 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可 ...
- CSS控制div宽度最大宽度/高度和最小宽度/高度
在网页制作中经常要控制div宽度最大宽度/高度或者最小宽度/高度,但是在IE6中很多朋友都会遇到不兼容的头疼问题,包括我也经常遇到这样的问题,在百度查了很多都没法解决,后来在一个论坛上学习到,在这里跟 ...
- css控制div等比高度
在移动端开发中,在banner轮播图未加载出来之前,banner层是不占文档流高度的,当从服务器获取完banner数据,展示的时候,banner层因为有了内容 所以会撑开,导致banner层下面的内容 ...
- 用CSS控制DIV居中失效的解决方法
1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- css控制div下图片自适应解决方法:图片不超过最大宽度
我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...
- 前端学习笔记2017.6.12 CSS控制DIV
前一篇文章中用div布局了豆瓣东西的页面,如果用html代码表示的话大概是这个样子的 <!DOCTYPE html><html><head></head> ...
- Css控制div水平垂直居中显示
<style>#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}#center{background:#FF ...
- css控制div强制换行
div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{word-br ...
随机推荐
- javascript _ajax 原理 初级
1.1使用php 方式获取时间:写一个time.php文件,保存在test 文件夹中 <!DOCTYPE html> <html lang="en"> &l ...
- Linux 循环创建多个线程
这里说一下相关的基础知识: 线程概念 什么是线程 LWP:light weight process 轻量级的进程,本质仍是进程(在Linux环境下) 进程:独立地址空间,拥有PCB 线 ...
- 在升级过内核的机器上安装docker遇到的一个错误
出现了以下错误: [root@osd2 ~]# service docker start Starting cgconfig service: Error: cannot mount memory t ...
- [Shell]Bash基本功能：多命令顺序执行与管道符
/*----------------------------------------------------------------------------------------------- @黑 ...
- MyBatis对入参对象的属性空判断
<!-- 查询学生list,like姓名 --> <select id="getStudentListLikeName" parameterType=&q ...
- 关于WSSE验证-- 一种验证用户的方法
大家通常验证用户做法: 1. BASIC验证模式: 把用户名和密码采用Base64编码之后,放在HTTP HEADER里,发到服务器的. 2. FORM验证模式: 就什么都不处理,直接发到服务器. 3 ...
- 29.Junit测试框架.md
目录 作用 使用 单个对象的测试 有步骤的测试 注意 作用 用于简化测试,可以对方法,类,包等范围测试 使用 单个对象的测试 在需要测试的方法上加注解@Test,选中方法,运行里选择junit执行 同 ...
- shiro 认证思路
- 用python对txt中文件读取，然后按顺序标号存入excel中
读取txt文件,然后存入excel中 import xlwt #从txt文件中读取内容,放到ftext1中 f1=open('/Users/XXX/Documents/pythonwork/tenso ...
- 移动端调起qq聊天
<div class="item item-right" style='width:3rem;padding-left:0rem;'>QQ:<a target=& ...