利用CSS动画效果制作摩天轮

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				background-image: url(img/2.jpg);
				background-size: cover;
			}
			
			div {
				position: absolute;
			}
			
			div:nth-child(1) {
				background-image: url(img/fsw.png);
				background-size: cover;
				width: 768px;
				height: 768px;
				left: 50%;
				margin-left: -384px;
				animation: zhuan 20s linear infinite;
			}
			
			div:nth-child(2) {
				background-image: url(img/bracketsmall.png);
				background-size: cover;
				width: 247px;
				height: 490px;
				left: 50%;
				top: 50%;
				margin-left: -123.5px;
				z-index: -1;
			}
			
			div:nth-child(3) {
				background-image: url(img/bracket.png);
				background-size: cover;
				width: 358px;
				height: 529px;
				left: 50%;
				top: 50%;
				margin-left: -179px;
				z-index: 1;
			}
			
			div:nth-child(4) {
				background-image: url(img/big-title.png);
				background-size: cover;
				width: 577px;
				height: 257px;
				left: 50%;
				top: 50%;
				margin-left: -288.5px;
				margin-top: -178.5px;
				z-index: 2;
			}
			
			div:nth-child(5) {
				background-image: url(img/title.png);
				background-size: cover;
				width: 413px;
				height: 139px;
				left: 50%;
				margin-left: -206.5px;
				top: 50%;
				margin-top: 25px;
				z-index: 2;
			}
			
			li {
				list-style: none;
				position: absolute;
				z-index: 2;
				animation: renzhuan 20s linear infinite;
			}
			
			li:nth-child(1) {
				width: 130px;
				height: 170px;
				background-image: url(img/boy.png);
				background-size: cover;
				left: 60px;
				top: 35px;
			}
			
			li:nth-child(2) {
				width: 130px;
				height: 170px;
				background-image: url(img/dog.png);
				background-size: cover;
				right: 60px;
				top: 25px;
			}
			
			li:nth-child(3) {
				width: 130px;
				height: 170px;
				background-image: url(img/girl.png);
				background-size: cover;
				right: -45px;
				top: 290px;
			}
			
			li:nth-child(4) {
				width: 130px;
				height: 170px;
				background-image: url(img/girls.png);
				background-size: cover;
				right: 47px;
				top: 556px;
			}
			
			li:nth-child(5) {
				width: 130px;
				height: 170px;
				background-image: url(img/hairboy.png);
				background-size: cover;
				left: 50%;
				margin-left: -53px;
				bottom: -43px;
			}
			
			li:nth-child(6) {
				width: 130px;
				height: 170px;
				background-image: url(img/mimi.png);
				background-size: cover;
				left: 69px;
				bottom: 27px;
			}
			
			li:nth-child(7) {
				width: 130px;
				height: 170px;
				background-image: url(img/mudog.png);
				background-size: cover;
				left: -42px;
				bottom: 303px;
			}
			
			li:nth-child(8) {
				width: 130px;
				height: 170px;
				background-image: url(img/shamegirl.png);
				background-size: cover;
				top: -79px;
				left: 329px;
			}
			
			@keyframes zhuan {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
			
			@keyframes renzhuan {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(-360deg);
				}
			}
		</style>
	</head>

	<body>
		<div>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div>

		</div>
		<div>

		</div>
		<div>

		</div>
		<div>

		</div>

	</body>

</html>
利用CSS动画效果制作摩天轮

猜你喜欢
