<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.logo {
width: 270px;
height: 129px;
cursor: pointer;
background: url(./baidu_bg.png) 0px 0px no-repeat;
animation: donghua 5s steps(1) infinite;
}
@keyframes donghua {
0% {background-position: 0px 0;}
5% {background-position: -270px 0;}
10% {background-position: -540px 0;}
15% {background-position: -810px 0;}
20% {background-position: -1080px 0;}
25% {background-position: -1350px 0;}
30% {background-position: -1620px 0;}
35% {background-position: -1890px 0;}
40% {background-position: -2160px 0;}
45% {background-position: -2430px 0;}
50% {background-position: -2700px 0;}
55% {background-position: -2970px 0;}
60% {background-position: -3240px 0;}
65% {background-position: -3510px 0;}
70% {background-position: -3780px 0;}
75% {background-position: -4050px 0;}
80% {background-position: -4320px 0;}
85% {background-position: -4590px 0;}
90% {background-position: -4860px 0;}
90% {background-position: -5130px 0;}
100% {background-position: -5400px 0;}
}
</style>
</head>
<body>
<div class="logo">
</div>
</body>
</html>
Image source:
Show results:
