一个菜鸟的互联网技术分享博客
您的位置: 主页 > 幸福摩天轮
advertisement

幸福摩天轮

在家无聊的时候写了一个小东西来玩玩,代码如下:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>幸福摩天轮</title>  
  6.     <style type="text/css">  
  7.         #{  
  8.             margin: 0 auto;  
  9.             padding: 0;  
  10.         }  
  11.         #content{  
  12.             width: 1300px;  
  13.             height: 600px;  
  14.             background: url(img/2.jpg);  
  15.             background-size: 100% 100%;  
  16.             position: relative;  
  17.         }  
  18.         #bracket{  
  19.             height: 350px;  
  20.             position: absolute;  
  21.             bottom: 0;  
  22.             left: 35%;  
  23.             z-index: 5;  
  24.         }  
  25.         #bracketsmall{  
  26.             height: 350px;  
  27.             position: absolute;  
  28.             bottom: 0;  
  29.             left: 37.5%;  
  30.         }  
  31.         #wheel{  
  32.             width: 500px;  
  33.             height: 500px;  
  34.             background: url(img/fsw.png);  
  35.             background-size: 100% 100%;  
  36.             position: absolute;  
  37.             z-index: 4;  
  38.             left: 25%;  
  39.             top: 2%;  
  40.             animation: animat1 7s infinite linear;  
  41.         }  
  42.              /*添加动画*/  
  43.         @keyframes animat1{  
  44.             from{transform: rotate(0);}  
  45.             to{transform: rotate(360deg);}  
  46.         }  
  47.         @keyframes rerot{  
  48.             from{transform: rotate(0);}  
  49.             to{transform: rotate(-360deg);}  
  50.         }  
  51.         #wheel img{  
  52.             width: 100px;  
  53.             position: absolute;  
  54.             animation: rerot 7s infinite linear;  
  55.         }  
  56.         #big-title{  
  57.             width: 180px;  
  58.             height: 180px;  
  59.             position: absolute;  
  60.             left: 37%;  
  61.             top: 31%;  
  62.             z-index: 6  
  63.         }  
  64.         #title{  
  65.             width: 120px;  
  66.             height: 120px;  
  67.             position: absolute;  
  68.             top: 55%;  
  69.             left: 39.4%;  
  70.             z-index: 6;  
  71.         }  
  72.         #arrow{  
  73.             width: 100px;  
  74.             height: 100px;  
  75.             position: absolute;  
  76.             left: 41%;  
  77.             bottom: 3%;  
  78.         }  
  79.         #boy{left: 40%;top: -3%}  
  80.         #dog{left: 71%;top: 7%;}  
  81.         #girl{right: -5%;top: 40%}  
  82.         #girls{right:10%;bottom: 6%;}  
  83.         #hairboy{bottom: -5%;left: 41%;}  
  84.         #mimi{bottom: 6%;left: 9%;}  
  85.         #mudog{bottom: 38%;left: -5%;}  
  86.         #shamegirl{top: 5%;left: 9%;}  
  87.     </style>  
  88. </head>  
  89. <body>  
  90.     <div id="content">  
  91.         <div id="wheel">  
  92.             <img src="img/boy.png" id="boy">  
  93.             <img src="img/dog.png" id="dog">  
  94.             <img src="img/girl.png" id="girl">  
  95.             <img src="img/girls.png" id="girls">  
  96.             <img src="img/hairboy.png" id="hairboy">  
  97.             <img src="img/mimi.png" id="mimi">  
  98.             <img src="img/mudog.png" id="mudog">  
  99.             <img src="img/shamegirl.png" id="shamegirl">  
  100.         </div>  
  101.         <img src="img/bracket.png" id="bracket">  
  102.         <img src="img/bracketsmall.png" id="bracketsmall">  
  103.         <img src="img/big-title.png" id="big-title">  
  104.         <img src="img/title.png" id="title">  
  105.         <img src="img/arrow.png" id="arrow">  
  106.         <audio src="多媒体资料/Where Is the Love.mp3" autoplay="autoplay"></audio>  
  107.     </div>  
  108. </body>  
  109. </html> 

文件和源码地址:https://github.com/listenerzhang/Happy-Ferris-wheel

在google上面会出现音乐不放不了的情况,是google浏览器上面要设置的东西,解决方案:解决chrome浏览器不支持audio和video标签的autoplay自动播放
zhangren.online
上一篇:爱心鱼游戏
下一篇:三种原生JS实现数字从0自动增加到某个指定的数字

您可能喜欢

​幸福摩天轮

​幸福摩天轮

​爱心鱼游戏

​爱心鱼游戏

回到顶部