CSS练习-西游记-CSDN博客

本文链接：https://blog.csdn.net/Mrxcguo/article/details/107744614

内附背景图片及师徒四人图片URL
1.背景图:背景图
2.悟空:悟空
3.八戒:八戒
4.唐僧:唐僧
5.沙僧:沙僧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>西游记</title>
	<style>
		*{
			margin: 0;
			padding:0;
		}
		html,body,.content{
			width: 100%;
			height: 100%;
		}
		body{
			overflow: hidden;
		}
		.content{
			background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/2.jpg);
		}
		.view{
			width: 1000px;
			height: 200px;
			position: absolute;
			top: 0px;
			bottom: 0px;
			left: 0px;
			right: 0px;
			margin: auto;
		}
		.view >div{
			overflow: hidden;
			float: left;
			margin-right: 30px;
		}
		.wk,.bj{
			width: 200px;
			height: 180px;
		}
		.ts{
			width: 170px;
			height:240px ;
		}
		.ss{
			width: 200px;
			height: 180px;
		}
		.wk img,.bj img{
			animation:wk-move 1s infinite steps(8);
		}
		.ts img{
			animation:ts-move 1s infinite steps(8);
		}
		.ss img{
			animation:ss-move 1s infinite steps(8);
		}
		@keyframes wk-move{
			0%{
				margin-left: 0px;
			}
			100%{
				margin-left: -1600px;
			}
		}
		@keyframes ts-move{
			0%{
				margin-left: 0px;
			}
			100%{
				margin-left: -1360px;
			}
		}
		@keyframes ss-move{
			0%{
				margin-left: 0px;
			}
			100%{
				margin-left: -1680px;
			}
		}
	</style>
</head>
<body>
	<div class="content"></div>
	<div class="view">
		<div class="wk">
			<img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_01_3ca39fe.png" alt="">
		</div>
		<div class="bj">
			<img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_02_47bad19.png" alt="">
		</div>
		<div class="ts">
			<img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_03_f962447.png" alt="">
		</div>
		<div class="ss">
			<img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_04_6516d80.png" alt="">
		</div>
	</div>
</body>
</html>