摩天轮代码
< ! DOCTYPE html >
< html > < head > < meta charset = "UTF-8" > < title > < / title > < style > * { margin: 0 ; padding: 0 ; } html , body { height: 100 % ; } body { background: url ( "img3/2.jpg" ) no-repeat ; background-size: 100 % 100 % ; overflow:hidden ; } . box { width: 620 px ; height: 520 px ; background:url ( img3 / bracket . png ) no-repeat center bottom ; position:fixed ; left: 0 ; right: 0 ; bottom:- 140 px ; margin:auto ; } . box img:nth-child ( 1 ) { position:absolute ; top:- 380 px ; left:- 73 px ; animation:move1 60 s linear infinite ; } . box img:nth-child ( 2 ) { position:absolute ; top:- 134 px ; left: 30 px ; } . box2 { width: 768 px ; height: 768 px ; position:fixed ; top: 0 px ; left: 0 px ; bottom: 0 px ; right: 0 px ; margin:auto ; animation:move1 60 s linear infinite ; } . box2 img { position:absolute ; animation:move2 60 s linear infinite ; transform-origin: 50 % 0 ; } . box2 img:nth-child ( 1 ) { top: 40 px ; left: 324 px ; } . box2 img:nth-child ( 2 ) { top: 132 px ; right: 88 px ; } . box2 img:nth-child ( 3 ) { top: 380 px ; right:- 25 px ; } . box2 img:nth-child ( 4 ) { bottom:- 30 px ; right: 86 px ; } . box2 img:nth-child ( 5 ) { bottom:- 127 px ; right: 306 px ; } . box2 img:nth-child ( 6 ) { bottom:- 27 px ; left: 75 px ; } . box2 img:nth-child ( 7 ) { bottom: 215 px ; left: 0 px ; } . box2 img:nth-child ( 8 ) { top: 144 px ; left: 80 px ; } @ keyframes move1 { 0 % { transform:rotate ( 0 deg ) ; } 50 % { transform:rotate ( 180 deg ) ; } 100 % { transform:rotate ( 360 deg ) ; } } @ keyframes move2 { 0 % { transform:rotate ( 0 deg ) ; } 50 % { transform:rotate ( - 180 deg ) ; } 100 % { transform:rotate ( - 360 deg ) ; } } < / style > < / head > < body > < div class = "box" > < img src = "img3/fsw.png" alt = "" /> < img src = "img3/big-title.png" alt = "" /> < / div > < div class = "box2" > < img src = "img3/boy.png" /> < img src = "img3/girl.png" /> < img src = "img3/girls.png" /> < img src = "img3/hairboy.png" /> < img src = "img3/mimi.png" /> < img src = "img3/mudog.png" /> < img src = "img3/dog.png" /> < img src = "img3/mudog.png" /> < / div > < / body >
< / html >