1.less

* {
    margin: 0;
    padding: 0;
    //html,body{}
    body {
        height: 100%;
        overflow: hidden;
        #wrap {
            position: absolute;
            width: 600px;
            height: 600px;
            background: url(../img/my-logo-2.png) repeat;
            background-size: 50px;
            border: 2px solid steelblue;
            border-radius: 8%;
            box-shadow: 2px 2px 5px #000000;
            text-align: center;
            top: 50%;
            left: 50%;
            margin-top: -300px;
            margin-left: -300px;
            &:hover #wrap-inner #wrap-tusiji {
                animation-play-state: paused;
            }
            #logo {
                position: absolute;
                width: 120px;
                height: 40px;
                font: 30px/38px "微软雅黑";
                color: white;
                background: tomato;
                border: 2px solid white;
                border-radius: 8%;
                top: 80%;
                left: 40%;
            }
            /**
                            兔斯基png：576*48，12张图，每个48*48,需要12个step,end结束时返回第一帧（不到最后一帧），start不返回第一帧，到最后一帧-》会出现空白
                            图片为12帧，动画在执行完12帧之后，返回第一帧之前，进行位移会形成空白帧（13帧）
         */
            #wrap-inner {
                position: absolute;
                width: 300px;
                height: 300px;
                background: salmon;
                border: 1px solid white;
                border-radius: 50%;
                box-shadow: 2px 2px 5px salmon;
                top: 50%;
                left: 50%;
                margin-top: -150px;
                margin-left: -150px;
                .description{
                    position: absolute;
                    color: white;
                    font: 30px "微软雅黑";
                    font-weight: lighter;
                    top: 24%;
                    left: 26%;
                }
                #wrap-tusiji {
                    position: absolute;
                    width: 48px;
                    height: 48px;
                    background: url(../img/tusiji-animation.png);
                    border: 1px solid white;
                    border-radius: 4%;
                    top: 50%;
                    left: 50%;
                    margin-top: -24px;
                    margin-left: -24px;
                    //指定开始时，BG图片的位置
                    background-position: 0 0;
                    //name-》duration-》delay-》
                    animation: run-tsj .8s steps(12,end) infinite;
                }
            }
        }
    }
    
    @keyframes run-tsj{
        from{
            background-position: 0 0;
        }
        to{
            background-position: -576px 0;
        }
    }
}

2.css

* {
  margin: 0;
  padding: 0;
}
* body {
  height: 100%;
  overflow: hidden;
}
* body #wrap {
  position: absolute;
  width: 600px;
  height: 600px;
  background: url(../img/my-logo-2.png) repeat;
  background-size: 50px;
  border: 2px solid steelblue;
  border-radius: 8%;
  box-shadow: 2px 2px 5px #000000;
  text-align: center;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -300px;
  /**
                            兔斯基png：576*48，12张图，每个48*48,需要12个step,end结束时返回第一帧（不到最后一帧），start不返回第一帧，到最后一帧-》会出现空白
                            图片为12帧，动画在执行完12帧之后，返回第一帧之前，进行位移会形成空白帧（13帧）
         */
}
* body #wrap:hover #wrap-inner #wrap-tusiji {
  animation-play-state: paused;
}
* body #wrap #logo {
  position: absolute;
  width: 120px;
  height: 40px;
  font: 30px/38px "微软雅黑";
  color: white;
  background: tomato;
  border: 2px solid white;
  border-radius: 8%;
  top: 80%;
  left: 40%;
}
* body #wrap #wrap-inner {
  position: absolute;
  width: 300px;
  height: 300px;
  background: salmon;
  border: 1px solid white;
  border-radius: 50%;
  box-shadow: 2px 2px 5px salmon;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -150px;
}
* body #wrap #wrap-inner .description {
  position: absolute;
  color: white;
  font: 30px "微软雅黑";
  font-weight: lighter;
  top: 24%;
  left: 26%;
}
* body #wrap #wrap-inner #wrap-tusiji {
  position: absolute;
  width: 48px;
  height: 48px;
  background: url(../img/tusiji-animation.png);
  border: 1px solid white;
  border-radius: 4%;
  top: 50%;
  left: 50%;
  margin-top: -24px;
  margin-left: -24px;
  background-position: 0 0;
  animation: run-tsj 0.8s steps(12, end) infinite;
}
@keyframes run-tsj {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -576px 0;
  }
}

3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>兔斯基动画</title>
	</head>
	<body>
		<div id="wrap">
			<div id="logo">cevent</div>
			<div id="wrap-inner">
				<span class="description">兔斯基动画</span>
				<div id="wrap-tusiji"></div>
			</div>
		</div>
	</body>
	<link rel="stylesheet" href="css/less037-tusiji.css" />
</html>

123456789101112131415161718

4.效果图