旋转摩天轮

最新推荐文章于 2024-10-14 16:05:05 发布

畅一凡

最新推荐文章于 2024-10-14 16:05:05 发布

阅读量653

点赞数 1

文章标签： css3 html5 html css

本文链接：https://blog.csdn.net/ProgrammingWhite/article/details/104664674

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>摩天轮</title>
       <link type="text/css" href="css/万能css.css" rel="stylesheet"/>
       <style type="text/css">
           body{background: url(img/2.jpg);
                   background-size: cover;}
           .box,.content{width: 768px;
                           height: 768px;
                           position: fixed;
                           top: 50%;left: 50%;
                           margin: -384px 0 0 -384px;}
           .img1{position: absolute;
                   top: 0;bottom: 0;
                   left: 0;right: 0;
                   margin: 0 auto;
                   }
           .img2,.img3{
               position: absolute;
               top:0;bottom:0;
               left:0;right:0;
               margin:auto;
           }
               .content img{
               position: absolute;
               animation: xiaoren 20s linear infinite;
           }
           .content img:nth-child(1){
               top:0;
               left:0;right:0;
               margin:auto;
           }
           .content img:nth-child(2){
               bottom:0;
               left:0;right:0;
               margin:auto;
           }
           .content img:nth-child(3){
               bottom:0;
               left:0;
               top:0;
               margin:auto;
           }
           .content img:nth-child(4){
               bottom:0;
               right:0;
               top:0;
               margin:auto;
           }
           .content img:nth-child(5){
               top:70px;
               left:70px;
           }
           .content img:nth-child(6){
               top:70px;
               right:70px;
           }
           .content img:nth-child(7){
               bottom:70px;
               right:70px;
           }
           .content img:nth-child(8){
               bottom:70px;
               left:70px;
           }
           .img2{
               animation: lunzi 20s linear infinite;
           }
           .content{
               animation: lunzi 20s linear infinite;
           }
           @keyframes lunzi{
               0%{ transform: rotate(0deg);}
               100%{ transform: rotate(360deg);}
           }
           @keyframes xiaoren{
               0%{ transform: rotate(0deg);}
               100%{ transform: rotate(-360deg);}
           }
       </style>
   </head>
   <body>
       <div class="box">
           <img class="img1" src="img/bracket.png"/>
           <img class="img2" src="img/fsw.png"/>
           <img class="img3" src="img/big-title.png"/>
           <div class="content">
               <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>
       </div>
   </body>
</html>