<html> | |
<head> | |
<title></title> | |
<style type="text/css"> | |
.hourse{ | |
width: 130px; | |
margin: 100px auto; | |
height: 150px; | |
background-image: url(hourse.png); | |
background-repeat: no-repeat; | |
animation: run 1s steps(7) infinite; | |
} | |
@keyframes run{ | |
0%{ | |
background-position: -1040px 0; | |
} | |
100%{ | |
background-position: -130px 0; | |
} | |
} | |
/*@keyframes run{ | |
0%{ | |
background-position: 0 0; | |
} | |
14.2%{ | |
background-position: -130px 0; | |
} | |
28.4%{ | |
background-position: -260px 0; | |
} | |
42.6%{ | |
background-position: -390px 0; | |
} | |
56.8%{ | |
background-position: -520px 0; | |
} | |
71%{ | |
background-position: -650px 0; | |
} | |
85.2%{ | |
background-position: -780px 0; | |
} | |
100%{ | |
background-position: -910px 0; | |
} | |
} */ | |
</style> | |
</head> | |
<body> | |
<div class="hourse"></div> | |
</body> | |
</html> |
奔跑的马儿 css3动画效果
猜你喜欢
转载自blog.csdn.net/weixin_42400955/article/details/81149856
今日推荐
周排行