您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 滚动代码 >

    牛叉的HTML5齿轮转动动画[酷]

    时间:2014-04-09 08:38 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • HTML5动画效果一例,很牛叉的HTML5动画效果,转动的齿轮,还有吊轮上升效果,另外还有那些转动机构部分的动画效果也想当逼真,不得不赞一下HTML5的强大动画功能哦,对此感兴趣的,你可好好研究下代码。
    • <html>
      <head> 
      <meta charset="gb2312">
      <title>CSS3实现齿轮转动动画特效</title>
      <style>
      body{
      margin:0px;
      padding:0px;
      overflow:hidden;
      background: #196a73;
      background-image:url(http://www.codefans.net/jscss/demoimg/201403/bg.gif);
      height:100%;
      }
      #level{
      width:100%;
      height:1px;
      position:absolute;
      top:50%;
      }
      #content{
      text-align:center;
      margin-top:-327px;
      }
      #gears{
      width:478px;
      height:655px;
      position:relative;
      display:inline-block;
      vertical-align:middle;
      }
      #gears-static{
      background:url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat -363px -903px;
      width:329px;
      height:602px;
      position:absolute;
      bottom:5px;
      right:0px;
      opacity:0.4;
      }
      #title{
      vertical-align:middle;
      color:#9EB7B5;
      width:43%;
      display:inline-block;
      }
      #title h1{
      font-family: 'PTSansNarrowBold', sans-serif;
      font-size:3.6em;
      text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;
      }
      #title p{
      font-family: sans-serif;
      font-size:1.2em;
      line-height:148%;
      text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;
      }
      .shadow{
      -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
      -moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
      box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);
      }
      /*gear-system-1*/
      #gear15{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat 0 -993px;
      width: 321px;
      height: 321px;
      position:absolute;
      left:45px;
      top:179px;
      -webkit-animation: rotate-back 24000ms linear infinite;
      -moz-animation: rotate-back 24000ms linear infinite;
      -ms-animation: rotate-back 24000ms linear infinite;
      animation: rotate-back 24000ms linear infinite;
      }
      #shadow15{
      width:306px;
      height:306px;
      -webkit-border-radius:153px;
      -moz-border-radius:153px;
      border-radius:153px;
      position:absolute;
      left:52px;
      top:186px;
      }
      #gear14{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat 0 -856px;
      width: 87px;
      height: 87px;
      position:absolute;
      left:162px;
      top:296px;
      }
      #shadow14{
      width:70px;
      height:70px;
      -webkit-border-radius:35px;
      -moz-border-radius:35px;
      border-radius:35px;
      position:absolute;
      left:171px;
      top:304px;
      }
      #gear13{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat 0 -744px;
      width: 62px;
      height: 62px;
      position:absolute;
      left:174px;
      top:309px;
      -webkit-animation: rotate 8000ms linear infinite;
      -moz-animation: rotate 8000ms linear infinite;
      -ms-animation: rotate 8000ms linear infinite;
      animation: rotate 8000ms linear infinite;
      }
      #shadow13{
      width:36px;
      height:36px;
      -webkit-border-radius:18px;
      -moz-border-radius:18px;
      border-radius:18px;
      position:absolute;
      left:187px;
      top:322px;
      }
      /*gear-system-2*/
      #gear10{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat 0 -184px;
      width: 122px;
      height: 122px;
      position:absolute;
      left:175px;
      top:0;
      -webkit-animation: rotate-back 8000ms linear infinite;
      -moz-animation: rotate-back 8000ms linear infinite;
      -ms-animation: rotate-back 8000ms linear infinite;
      animation: rotate-back 8000ms linear infinite;
      }
      #shadow10{
      width:86px;
      height:86px;
      -webkit-border-radius:43px;
      -moz-border-radius:43px;
      border-radius:43px;
      position:absolute;
      left:193px;
      top:18px;
      }
      #gear3{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat 0 -1493px;
      width: 85px;
      height: 84px;
      position:absolute;
      left:194px;
      top:19px;
      -webkit-animation: rotate 10000ms linear infinite;
      -moz-animation: rotate 10000ms linear infinite;
      -ms-animation: rotate 10000ms linear infinite;
      animation: rotate 10000ms linear infinite;
      }
      #shadow3{
      width:60px;
      height:60px;
      -webkit-border-radius:30px;
      -moz-border-radius:30px;
      border-radius:30px;
      position:absolute;
      left:206px;
      top:31px;
      }
      /*gear-system-3*/
      #gear9{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat -371px -280px;
      width: 234px;
      height: 234px;
      position:absolute;
      left:197px;
      top:96px;
      -webkit-animation: rotate 12000ms linear infinite;
      -moz-animation: rotate 12000ms linear infinite;
      -ms-animation: rotate 12000ms linear infinite;
      animation: rotate 12000ms linear infinite;
      }
      #shadow9{
      width:200px;
      height:200px;
      -webkit-border-radius:100px;
      -moz-border-radius:100px;
      border-radius:100px;
      position:absolute;
      left:214px;
      top:113px;
      }
      #gear7{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat -371px 0;
      width: 108px;
      height: 108px;
      position:absolute;
      left:260px;
      top:159px;
      -webkit-animation: rotate-back 10000ms linear infinite;
      -moz-animation: rotate-back 10000ms linear infinite;
      -ms-animation: rotate-back 10000ms linear infinite;
      animation: rotate-back 10000ms linear infinite;
      }
      #shadow7{
      width:76px;
      height:76px;
      -webkit-border-radius:38px;
      -moz-border-radius: 38px;
      border-radius: 38px;
      position:absolute;
      left:276px;
      top:175px;
      }
      /*gear-system-4*/
      #gear6{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat 0 -1931px;
      width: 134px;
      height: 134px;
      position:absolute;
      left:305px;
      bottom:212px;
      -webkit-animation: rotate-back 10000ms linear infinite;
      -moz-animation: rotate-back 10000ms linear infinite;
      -ms-animation: rotate-back 10000ms linear infinite;
      animation: rotate-back 10000ms linear infinite;
      }
      #shadow6{
      width:98px;
      height:98px;
      -webkit-border-radius:49px;
      -moz-border-radius: 49px;
      border-radius: 49px;
      position:absolute;
      left:323px;
      bottom:230px;
      }
      #gear4{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat 0 -1627px;
      width: 69px;
      height: 69px;
      position:absolute;
      left:337px;
      bottom:245px;
      -webkit-animation: rotate-back 10000ms linear infinite;
      -moz-animation: rotate-back 10000ms linear infinite;
      -ms-animation: rotate-back 10000ms linear infinite;
      animation: rotate-back 10000ms linear infinite;
      }
      /*gear-system-5*/
      #gear12{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat 0 -530px;
      width: 164px;
      height: 164px;
      position:absolute;
      left:208px;
      bottom:85px;
      -webkit-animation: rotate 8000ms linear infinite;
      -moz-animation: rotate 8000ms linear infinite;
      -ms-animation: rotate 8000ms linear infinite;
      animation: rotate 8000ms linear infinite;
      }
      #shadow12{
      width:124px;
      height:124px;
      -webkit-border-radius:62px;
      -moz-border-radius:62px;
      border-radius:62px;
      position:absolute;
      left:225px;
      bottom:107px;
      }
      #gear11{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat 0 -356px;
      width: 125px;
      height: 124px;
      position:absolute;
      left:228px;
      bottom:105px;
      -webkit-animation: rotate-back 10000ms linear infinite;
      -moz-animation: rotate-back 10000ms linear infinite;
      -ms-animation: rotate-back 10000ms linear infinite;
      animation: rotate-back 10000ms linear infinite;
      }
      #shadow11{
      width:88px;
      height:88px;
      -webkit-border-radius:44px;
      -moz-border-radius:44px;
      border-radius:44px;
      position:absolute;
      left:247px;
      bottom:123px;
      }
      #gear8{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat -371px -158px;
      width: 72px;
      height: 72px;
      position:absolute;
      left:254px;
      bottom:131px;
      -webkit-animation: rotate 6000ms linear infinite;
      -moz-animation: rotate 6000ms linear infinite;
      -ms-animation: rotate 6000ms linear infinite;
      animation: rotate 6000ms linear infinite;
      }
      #shadow8{
      width:42px;
      height:42px;
      -webkit-border-radius:21px;
      -moz-border-radius: 21px;
      border-radius: 21px;
      position:absolute;
      left:269px;
      bottom:146px;
      }
      /*gear1*/
      #gear1{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat 0 0;
      width: 135px;
      height: 134px;
      position:absolute;
      left:83px;
      bottom:111px;
      -webkit-animation: rotate-back 10000ms linear infinite;
      -moz-animation: rotate-back 10000ms linear infinite;
      -ms-animation: rotate-back 10000ms linear infinite;
      animation: rotate-back 10000ms linear infinite;
      }
      #shadow1{
      width:96px;
      height:96px;
      -webkit-border-radius:48px;
      -moz-border-radius:48px;
      border-radius:48px;
      position:absolute;
      left:103px;
      bottom:130px;
      }
      /*gear-system-6*/
      #gear5{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat 0 -1746px;
      width: 134px;
      height: 135px;
      position:absolute;
      left:22px;
      top:108px;
      -webkit-animation: rotate 10000ms linear infinite alternate;
      -moz-animation: rotate 10000ms linear infinite alternate;
      -ms-animation: rotate 10000ms linear infinite alternate;
      animation: rotate 10000ms linear infinite alternate;
      }
      #shadow5{
      width:96px;
      height:96px;
      -webkit-border-radius:48px;
      -moz-border-radius:48px;
      border-radius:48px;
      position:absolute;
      left:41px;
      top:127px;
      }
      #gear2{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat 0 -1364px;
      width: 80px;
      height: 79px;
      position:absolute;
      left:49px;
      top:136px;
      -webkit-animation: rotate-back 10000ms linear infinite alternate;
      -moz-animation: rotate-back 10000ms linear infinite alternate;
      -ms-animation: rotate-back 10000ms linear infinite alternate;
      animation: rotate-back 10000ms linear infinite alternate;
      }
      /*weight*/
      #weight{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat -371px -564px;
      width: 34px;
      height: 92px;
      position:absolute;
      left:1px;
      bottom:0;
      -webkit-animation: up 10000ms linear infinite alternate;
      -moz-animation: up 10000ms linear infinite alternate;
      -ms-animation: up 10000ms linear infinite alternate;
      animation: up 10000ms linear infinite alternate;
      }
      #shadowweight{
      width:10px;
      height:80px;
      position:absolute;
      left:12px;
      bottom:0px;
      -webkit-animation: up 10000ms linear infinite alternate;
      -moz-animation: up 10000ms linear infinite alternate;
      -ms-animation: up 10000ms linear infinite alternate;
      animation: up 10000ms linear infinite alternate;
      }
      /*chain*/
      #chain-circle{
      background: url(http://www.codefans.net/jscss/demoimg/201403/FgFnjks.png) no-repeat -371px -706px;
      width:146px;
      height:147px;
      position:absolute;
      left:17px;
      top:102px;
      -webkit-animation: rotate 10000ms linear infinite alternate;
      -moz-animation: rotate 10000ms linear infinite alternate;
      -ms-animation: rotate 10000ms linear infinite alternate;
      animation: rotate 10000ms linear infinite alternate;
      }
      #chain{
      width:1px;
      height:380px;
      border-left:2px dotted #C8D94A;
      position:absolute;
      left:17px;
      top:175px;
      opacity:0.7;
      -webkit-animation: collapse 10000ms linear infinite alternate;
      -moz-animation: collapse 10000ms linear infinite alternate;
      -ms-animation: collapse 10000ms linear infinite alternate;
      animation: collapse 10000ms linear infinite alternate;
      }
      /*ANIMATIONS*/
      /*rotate*/
      @keyframes "rotate" {
       from {
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
       }
       to {
          -webkit-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg);
       }
      }
      @-moz-keyframes rotate {
       from {
         -moz-transform: rotate(0deg);
         transform: rotate(0deg);
       }
       to {
         -moz-transform: rotate(360deg);
         transform: rotate(360deg);
       }
      }
      @-webkit-keyframes "rotate" {
       from {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
       }
       to {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
       }
      }
      @-ms-keyframes "rotate" {
       from {
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
       }
       to {
         -ms-transform: rotate(360deg);
         transform: rotate(360deg);
       }
      }
      @-o-keyframes "rotate" {
       from {
         -o-transform: rotate(0deg);
         transform: rotate(0deg);
       }
       to {
         -o-transform: rotate(360deg);
         transform: rotate(360deg);
       }
      }
      /*rotate-back*/
      @keyframes "rotate-back" {
       from {
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
       }
       to {
          -webkit-transform: rotate(-360deg);
          -moz-transform: rotate(-360deg);
          -o-transform: rotate(-360deg);
          -ms-transform: rotate(-360deg);
          transform: rotate(-360deg);
       }
      }
      @-moz-keyframes rotate-back {
       from {
         -moz-transform: rotate(0deg);
         transform: rotate(0deg);
       }
       to {
         -moz-transform: rotate(-360deg);
         transform: rotate(-360deg);
       }
      }
      @-webkit-keyframes "rotate-back" {
       from {
         -webkit-transform: rotate(0deg);
         transform: rotate(0deg);
       }
       to {
         -webkit-transform: rotate(-360deg);
         transform: rotate(-360deg);
       }
      }
      @-ms-keyframes "rotate-back" {
       from {
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
       }
       to {
         -ms-transform: rotate(-360deg);
         transform: rotate(-360deg);
       }
      }
      @-o-keyframes "rotate-back" {
       from {
         -o-transform: rotate(0deg);
         transform: rotate(0deg);
       }
       to {
         -o-transform: rotate(-360deg);
         transform: rotate(-360deg);
       }
      }
      /*weight up*/
      @keyframes "up" {
       from {
          bottom: 0px;
       }
       to {
          bottom: 340px;
       }
      }
      @-moz-keyframes up {
       from {
         bottom: 0px;
       }
       to {
         bottom: 340px;
       }
      }
      @-webkit-keyframes "up" {
       from {
         bottom: 0px;
       }
       to {
         bottom: 340px;
       }
      }
      @-ms-keyframes "up" {
       from {
         bottom: 0px;
       }
       to {
         bottom: 340px;
       }
      }
      @-o-keyframes "up" {
       from {
         bottom: 0px;
       }
       to {
         bottom: 340px;
       }
      }
      /*chain up and down*/
      @keyframes "collapse" {
       from {
          height: 387px;
       }
       to {
          height: 48px;
       }
      }
      @-moz-keyframes collapse {
       from {
         height: 387px;
       }
       to {
         height: 48px;
       }
      }
      @-webkit-keyframes "collapse" {
       from {
         height: 387px;
       }
       to {
         height: 48px;
       }
      }
      @-ms-keyframes "collapse" {
       from {
         height: 387px;
       }
       to {
         height: 48px;
       }
      }
      @-o-keyframes "collapse" {
       from {
         height: 387px;
       }
       to {
         height: 48px;
       }
      }
      </style>
      </head> 
      <body>
      <div id="level">
      <div id="content">
      <div id="gears">
      <div id="gears-static"></div>
      <div id="gear-system-1">
      <div class="shadow" id="shadow15"></div>
      <div id="gear15"></div>
      <div class="shadow" id="shadow14"></div>
      <div id="gear14"></div>
      <div class="shadow" id="shadow13"></div>
      <div id="gear13"></div>
      </div>
      <div id="gear-system-2">
      <div class="shadow" id="shadow10"></div>
      <div id="gear10"></div>
      <div class="shadow" id="shadow3"></div>
      <div id="gear3"></div>
      </div>
      <div id="gear-system-3">
      <div class="shadow" id="shadow9"></div>
      <div id="gear9"></div>
      <div class="shadow" id="shadow7"></div>
      <div id="gear7"></div>
      </div>
      <div id="gear-system-4">
      <div class="shadow" id="shadow6"></div>
      <div id="gear6"></div>
      <div id="gear4"></div>
      </div>
      <div id="gear-system-5">
      <div class="shadow" id="shadow12"></div>
      <div id="gear12"></div>
      <div class="shadow" id="shadow11"></div>
      <div id="gear11"></div>
      <div class="shadow" id="shadow8"></div>
      <div id="gear8"></div>
      </div>
      <div class="shadow" id="shadow1"></div>
      <div id="gear1"></div>
      <div id="gear-system-6">
      <div class="shadow" id="shadow5"></div>
      <div id="gear5"></div>
      <div id="gear2"></div>
      </div>
      <div class="shadow" id="shadowweight"></div>
      <div id="chain-circle"></div>
      <div id="chain"></div>
      <div id="weight"></div>
      </div>
      </div>
      </div>
      </div>
      </body>
      </html>
    牛叉的HTML5齿轮转动动画[酷]由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/gundong/7059.html
    标签:网站源码