西游记西天取经场景小动画

最新推荐文章于 2024-11-01 16:27:07 发布

放开那bug，让我来

最新推荐文章于 2024-11-01 16:27:07 发布

阅读量543

点赞数 1

文章标签： javascript css3

本文链接：https://blog.csdn.net/herohzf/article/details/112853255

版权

西游记西天取经场景

在这里插入图片描述

img提取
提取码：xyqj

css样式

* {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	html,body {
		height: 100%;
	}
	.main {
		height: 100%;
		width: 100%;
		-webkit-background-size: cover;
		background-size: cover;
		overflow: hidden;
		position: relative;
	}
	.main ul {
		height: 100%;
		width: 3920px;
		position: absolute;
		top: 0;
		left: 0;
		animation: dong 50s linear infinite;
	}
	@keyframes dong {
		0% {
			left: 0;
		}
		100% {
			left: 1920px;
		}
	}
	.main ul li {
		height: 100%;
		width: 100%;
		background: url(imgs/2.jpg);
		float: left;
		margin-left: -2000px;
	}
	.wk {
		z-index: 999;
		width: 200px;
		height: 180px;
		background: url(imgs/west_01_3ca39fe.png) 0 0 no-repeat;
		/*margin: 400px auto;*/
		position: absolute;
		top: 55%;
		left: 20%;
		animation: wkzou 1s steps(8) infinite;
	}
	@keyframes wkzou {
		to {
			background-position: -1600px 0;
		}
	}
	.bj {
		z-index: 999;
		width: 200px;
		height: 180px;
		background: url(imgs/west_02_47bad19.png) 0 0 no-repeat;
		/*margin: 400px auto;*/
		position: absolute;
		top: 55%;
		left: 35%;
		animation: bjzou 1s steps(8) infinite;
	}
	@keyframes bjzou {
		to {
			background-position: -1600px 0;
		}
	}
	.ts {
		z-index: 999;
		width: 170px;
		height: 240px;
		background: url(imgs/west_03_f962447.png) 0 0 no-repeat;
		/*margin: 400px auto;*/
		position: absolute;
		top: 50%;
		left: 50%;
		animation: tszou 1s steps(8) infinite;
	}
	@keyframes tszou {
		to {
			background-position: -1360px 0;
		}
	}
	.ss {
		z-index: 999;
		width: 210px;
		height: 200px;
		background: url(imgs/west_04_6516d80.png) 0 0 no-repeat;
		/*margin: 400px auto;*/
		position: absolute;
		top: 57%;
		left: 62%;
		animation: sszou 1s steps(8) infinite;
	}
	@keyframes sszou {
		to {
			background-position: -1680px 0;
		}
	}

html页面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3小动画西天取经场景</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>

<div class="wk"></div>
<div class="bj"></div>
<div class="ts"></div>
<div class="ss"></div>
<div class="main">
	<ul>
		<li></li>
		<li></li>
	</ul>
</div>
</div>
</body>
</html>