- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <style type="text/CSS">
- *{margin: 0;padding: 0;} HTML,body{height: 100%; width: 100%;} body{ background:pink
- url("img/2.jpg")no-repeat; background-size:100% 100%; overflow:hidden;
- } .box{ width: 360px; height: 530px; background: url(img/bracket.PNG) ;
- position: absolute; left: 0;right: 0; bottom: -50px; margin: auto; } @keyframes
- move1{ from{transform: rotate(0deg);} to{transform: rotate(360deg);} }
- @keyframes move2{ from{transform: rotate(0deg);} to{transform: rotate(360deg);}
- } @keyframes move3{ from{transform: rotate(0deg);} to{transform: rotate(-360deg);}
- } .box img:nth-child(1){ position: absolute; top: -300px; left: -200px;
- animation: move1 30s linear infinite; } .box img:nth-child(2){ position:
- absolute; top: -50px; left: -104px; } .cir{ width: 768px; height: 768px;
- margin: 0 auto; position: relative; /* 此处用 absolute 较好 */ animation: move1
- 30s linear infinite; } .cir img{ position: absolute; transform-origin:
- top center; animation: move3 30s linear infinite; } .cir img:nth-child(1){
- top: 30px; left: 333px; } .cir img:nth-child(2){ top: 120px; right: 64px;
- } .cir img:nth-child(3){ top: 384px; right: -35px; } .cir img:nth-child(4){
- top: 620px; right: 60px; } .cir img:nth-child(5){ bottom: -120px; left:
- 333px; } .cir img:nth-child(6){ bottom: -35px; left: 83px; } .cir img:nth-child(7){
- top: 384px; left: -35px; } .cir img:nth-child(8){ top: 120px; left: 64px;
- }
- </style>
- </head>
- <body>
- <div class="box">
- <img src="img/fsw.png">
- <img src="img/big-title.png">
- </div>
- <div class="cir">
- <img src="img/boy.png">
- <img src="img/dog.png">
- <img src="img/girl.png">
- <img src="img/girls.png">
- <img src="img/hairboy.png">
- <img src="img/mimi.png">
- <img src="img/mudog.png">
- <img src="img/shamegirl.png">
- </div>
- </body>
- </HTML>
效果图:
摩天轮
来源: http://www.bubuko.com/infodetail-3464990.html