<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">首先我们先要需要一张图片 可以百度css sprite 图片保存到电脑,就可以用了</span><img src="?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 }}效果图
自己打败自己是最可悲的失败,