<!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>