摩天轮
Posted strongerpian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了摩天轮相关的知识，希望对你有一定的参考价值。
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>
效果图：
以上是关于摩天轮的主要内容，如果未能解决你的问题，请参考以下文章