css sprite 动画制作

<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 }}效果图

自己打败自己是最可悲的失败,

css sprite 动画制作

相关文章:

你感兴趣的文章:

标签云: