css sprite 动画制作

浏览数：29 / 时间：2015年06月09日

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">首先我们先要需要一张图片  可以百度css sprite 图片保存到电脑，就可以用了</span><img src="http://img.blog.csdn.net/20150428222643908?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjQ5Mjg0NTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);" />

新建一个html文件和css文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/donghua.css"/>
	</head>
	<body>
		<div></div>
	</body>
</html>

div{
	height: 93px;/*要显示框架的高度，可用尺子量*/
	width: 35px;/*要显示框架的宽度，可用尺子量*/
	margin: 100px;
	position: relative;
	-webkit-animation: anmi /*动画的名字*/ 3s /*动画持续的时间*/ infinite alternate /*动画循环*/;
	background: #00FFFF /*背景色*/ url(../../img/00351417.jpg) /*背景图片*/ no-repeat /*图片不平铺*/ ;
}
@-webkit-keyframes anmi{   /*动画*/
	0%{background-position:-8px -1px }
	10%{background-position:-40px -1px }
	20%{background-position:-70px -1px }
	30%{background-position:-100px -1px }
	40%{background-position:-130px -1px }
	50%{background-position:-160px -1px }
	60%{background-position:-190px -1px }
	70%{background-position:-210px -1px }
	80%{background-position:-240px -1px }
	90%{background-position:-270px -1px }
	100%{background-position:-8px -1px }
}

效果图