<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5+css3动画效果</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:#039;
position:absolute;/*这句不能少，否则动不起来*/
animation:hurong 5s infinite alternate;/*keyframes名称，动画时间，循环*/
-moz-animation:hurong 5s infinite alternate;/*火狐*/
-o-animation:hurong 5s infinite alternate;/*opera*/
-webkit-animation:hurong 5s infinite alternate;/*chrome safari*/
-ms-animation:hurong 5s infinite alternate;/*ie*/
}
@keyframes hurong{
0%{background-clor:#F00;left:0px;top:0px;}
25%{background-clor:#F00;left:200px;top:0px;}
50%{background-clor:#F00;left:200px;top:200px;}
75%{background-clor:#F00;left:0px;top:200px;}
100%{background-clor:#F00;left:0px;top:0px;}
}
@-moz-keyframes hurong{
0%{background-clor:#F00;left:0px;top:0px;}
25%{background-clor:#F00;left:200px;top:0px;}
50%{background-clor:#F00;left:200px;top:200px;}
75%{background-clor:#F00;left:0px;top:200px;}
100%{background-clor:#F00;left:0px;top:0px;}
}
</style>
</head>
<body>
<div>按正方形轨迹来回移动</div>
</body>
</html>
- 热门文章
- win7中将文件拷贝到虚拟机linux下
- phpexcel设置行高及列宽,背景颜色,
- rabbitmq无法启动
- intellij idea不显示git push按钮
- php7中使用mongodb的aggregate进行
- laravel页面静态化的方法
- centos7.4 64位下swoole安装及配置
- navicate连接mycat报1184错误
- curl设置超时不起作用(CURLOPT_TIM
- devops-jenkins容器为pending状态
- 好评文章
- phpexcel设置行高及列宽,背景颜色,
- php7中使用mongodb的aggregate进行
- intellij idea打开文件所在文件夹
- windows下使用MongoDB Compass Com
- win7中将文件拷贝到虚拟机linux下
- laravel 中悲观锁 & 乐观锁的使用
- 单点登录sso原理及php实现方式及de
- navicate连接mycat报1184错误
- rabbitmq无法启动
- laravel整合dingo/api方法步骤:jwt
- 我的项目
- 【github】www.github.com/hurong241
- 【码云】gitee.com/hu_rong/projects
- 【docker hub】hub.docker.com/repositories/hurong241
- 【packagist】packagist.org/users/hurong241/packages
- 站点信息
- 建站时间：2011年
- 文章数：623篇
- 浏览数：1336756
