zoukankan html css js c++ java

摩天轮

  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>

效果图：

查看全文

相关阅读:
Centos开启FTP及用户配置
 mysql update from 子查询
 sql server 查询表某个字段不重复数据
 ASP.NET 获取来源网站的网址,获取上一网页的网址,获取来源网页的URL,获取上一网页的URL
Warning: Invalid argument supplied for foreach()
不支持关键字: “userid”。
apache301重定向设置
 service httpd restart失败解决方法（小记）
JavaWeb（一）
jquery中filter的用法

原文地址：https://www.cnblogs.com/strongerPian/p/12507597.html