GIF怎么换位HTML,HTML5如何实现GIF动画

本篇教程探讨了HTML5如何实现GIF动画，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

html>

*{

margin: 0;

padding: 0;

}

.box{

width: 180px;

height: 300px;

margin: 50px auto;

overflow: hidden;

}

.run{

width: 180px;

height: 300px;

background: url(images/images/charector.png) no-repeat ;//图片素材自己找。。。

-webkit-animation:run 700ms steps(7) infinite;

}

@-webkit-keyframes run{

from{

background-position: 0 0;

}

to{

background-position: -1260px 0;

}

}

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！