<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
body{
background:url(./images/2.jpg) no-repeat;
/* 控制背景图大小 */
background-size:100% 100%;
}
img{
display:block;
}
.fixed_center{
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
}
/* 支架 */
.bracket{
margin:auto auto 0;
}
/* 轮子 */
.img1{
animation:imgRotate 20s linear infinite;
}
/* 放小人的盒子 */
.picBox{
768px;
height:768px;
animation:imgRotate 20s linear infinite;
}
.picBox img{
position: absolute;
/* 小人的图片也转动 反向的旋转 */
animation:imgRotate 20s linear infinite reverse;
/* 改变圆心点的位置 */
transform-origin:center 10px;
}
.pic1{
left: 43%;
top: 4%;
}
.pic2{
left: 43%;
bottom: -13%;
}
.pic3{
left: -1%;
top: 45%;
}
.pic4{
right: -1%;
top: 45%;
}
/* 关键帧 */
@keyframes imgRotate {
0%{
transform:rotate(0);
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<!-- 支架 -->
<img class="fixed_center bracket" src="./images/bracket.png" alt="">
<img class="fixed_center bracket" src="./images/bracketsmall.png" alt="">
<img class="fixed_center img1" src="./images/fsw.png" alt="">
<div class="fixed_center picBox">
<img class="pic1" src="./images/boy.png" alt="">
<img class="pic2" src="./images/girl.png" alt="">
<img class="pic3" src="./images/girls.png" alt="">
<img class="pic4" src="./images/mimi.png" alt="">
</div>
<!-- logo -->
<img class="fixed_center" src="./images/big-title.png" alt="">
</body>
</html>
