css梦幻西游动画

效果图:

html代码:

	<div class="shitu">
		<div class="swk"></div>
		<div class="zbj"></div>
		<div class="sf"></div>
		<div class="shs"></div>
	</div>

css代码:

body {
			width: 100%;
			height: 100%;
			background: url(imgs/1.jpg);
			animation: bei 5s steps(25) infinite;
		}

		@keyframes bei {
			from {
				background-position: 0px 0px;
			}

			to {
				background-position: 1920px 0px;
			}
		}

		.shitu {
			width: auto;
			height: auto;
			position: relative;
			left: -10px;
		}

		.swk {
			width: 191px;
			height: 181px;
			background: url(imgs/wk.png);
			animation: wk 1.3s steps(8) infinite;
			position: absolute;
			top: 320px;
			left: 405px;
		}

		.zbj {
			width: 191px;
			height: 181px;
			background: url(imgs/bj.png);
			animation: wk 1.3s steps(8) infinite;
			position: absolute;
			top: 320px;
			left: 635px;
		}

		.sf {
			width: 169px;
			height: 181px;
			background: url(imgs/sf.png);
			animation: sf 1.3s steps(8) infinite;
			background-position: 0px -6px;
			position: absolute;
			top: 288px;
			left: 859px;
		}

		.shs {
			width: 191px;
			height: 181px;
			background: url(imgs/ss.png);
			animation: shs 1.3s steps(8) infinite;
			position: absolute;
			top: 320px;
			left: 1097px;
		}

		@keyframes sf {
			from {
				background-position: 1360px 0px;
			}

			to {
				background-position: 0px 0;
			}
		}

		@keyframes shs {
			from {
				background-position: 1680px 0px;
			}

			to {
				background-position: 0px 0;
			}
		}

		@keyframes wk {
			from {
				background-position: 1600px 0px;
			}

			to {
				background-position: 0px 0;
			}
		}

总结:通过css中的animation把背景图片进行过渡一下,在将每一个演员进行animation过渡一下即可!
写的不太好 有什么不会的可以私信哦