1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 *{margin: 0;padding: 0;}
8 html,body{height: 100%; width: 100%;}
9 body{
10 background:pink url("img/2.jpg")no-repeat;
11 background-size:100% 100%;
12 overflow:hidden;
13 }
15 .box{
16 width: 360px;
17 height: 530px;
18 background: url(img/bracket.png) ;
19 position: absolute;
20 left: 0;right: 0;
21 bottom: -50px;
22 margin: auto;
23 }
25 @keyframes move1{
26 from{transform: rotate(0deg);}
27 to{transform: rotate(360deg);}
28 }
29 @keyframes move2{
30 from{transform: rotate(0deg);}
31 to{transform: rotate(360deg);}
32 }
33 @keyframes move3{
34 from{transform: rotate(0deg);}
35 to{transform: rotate(-360deg);}
36 }
39 .box img:nth-child(1){
40 position: absolute;
41 top: -300px;
42 left: -200px;
43 animation: move1 30s linear infinite;
44 }
45 .box img:nth-child(2){
46 position: absolute;
47 top: -50px;
48 left: -104px;
49 }
50 .cir{
51 width: 768px;
52 height: 768px;
53 margin: 0 auto;
54 position: relative; /*此处用absolute较好*/
55 animation: move1 30s linear infinite;
56 }
57 .cir img{
58 position: absolute;
59 transform-origin: top center;
60 animation: move3 30s linear infinite;
61 }
62 .cir img:nth-child(1){
63 top: 30px;
64 left: 333px;
65 }
66 .cir img:nth-child(2){
67 top: 120px;
68 right: 64px;
69 }
70 .cir img:nth-child(3){
71 top: 384px;
72 right: -35px;
73 }
74 .cir img:nth-child(4){
75 top: 620px;
76 right: 60px;
77 }
78 .cir img:nth-child(5){
79 bottom: -120px;
80 left: 333px;
81 }
82 .cir img:nth-child(6){
83 bottom: -35px;
84 left: 83px;
85 }
86 .cir img:nth-child(7){
87 top: 384px;
88 left: -35px;
89 }
90 .cir img:nth-child(8){
91 top: 120px;
92 left: 64px;
93 }
94 </style>
95 </head>
96 <body>
97 <div class="box">
98 <img src="img/fsw.png" >
99 <img src="img/big-title.png" >
100 </div>
101 <div class="cir">
102 <img src="img/boy.png" >
103 <img src="img/dog.png" >
104 <img src="img/girl.png" >
105 <img src="img/girls.png" >
106 <img src="img/hairboy.png" >
107 <img src="img/mimi.png" >
108 <img src="img/mudog.png" >
109 <img src="img/shamegirl.png" >
110 </div>
111 </body>
112 </html>
效果图：