使用CSS animation實現http://xujin.org/網頁中猴子動的效果,下面會給出可愛猴子照片 上面圖片中詳細介紹了animation樣式 下面給出讓可愛猴子動的代碼
<!DOCTYPE html>
<html>
<head>
<title>robot</title>
<style type="text/css">
@-webkit-keyframes **mashape-ape-animation** {
0% {
background-position: 0% 0%;
}
100% {
background-position: 200% 0%;
}
}
div{
width: 240px;
height:250px;
background-image:url('./ape-sprite.png');
background-size: 200% auto;
background-repeat: no-repeat;
background-position: 0px 0px;
animation:**mashape-ape-animation** 0.4s steps(2) infinite;
animation-play-state: running;
}
</style>
</head>
<body>
<div style=""></div>
</body>
</html>