html5+css3动画效果-按正方形轨迹来回移动

首页->学习资料->web前端->html5+css3实例关键词: 发布时间:2016-02-15 15:30:17 浏览次数:3546

<!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>

赞:(0)

踩:(0)