<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 }
}
效果图
时间： 2024-10-22 07:42:37