css做动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<style type="text/css">
.moveDiv{
margin: 100px auto;
background: url(../img/charector.png);                  /* 精灵图 */
background-repeat: no-repeat;
width: 180px;
height: 300px;
animation: move1 0.6s steps(7) infinite;
}

@keyframes move1{
from{background-position: 0 0;}
to{background-position: -1260px 0;}
}
</style>
</head>
<body>
<div class="moveDiv"></div>
</body>

</html>

 

上一篇:前端|Grid实现自适应九宫格布局


下一篇:背景图片的设置