基于HTML5的齿轮动画特效_html5教程技巧

来源：动视网责编：小采时间：2020-11-27 15:19:41

基于HTML5的齿轮动画特效_html5教程技巧

基于HTML5的齿轮动画特效_html5教程技巧:这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现

推荐度：

点击下载本文 文档为doc格式

导读基于HTML5的齿轮动画特效_html5教程技巧:这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现

这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。

HTML代码

XML/HTML Code复制内容到剪贴板

CSS代码

CSS Code复制内容到剪贴板


 #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(FgFnjks.png) no-repeat -363px -903px; 
  width:329px; 
  height:602px; 
  position:absolute; 
  bottombottom:5px; 
  rightright: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(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(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(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(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(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(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(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(FgFnjks.png) no-repeat 0 -1931px; 
  width: 134px; 
  height: 134px; 
  position:absolute; 
  left:305px; 
  bottombottom: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; 
  bottombottom:230px; 
 } 
 #gear4{ 
  background: url(FgFnjks.png) no-repeat 0 -1627px; 
  width: 69px; 
  height: 69px; 
  position:absolute; 
  left:337px; 
  bottombottom: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(FgFnjks.png) no-repeat 0 -530px; 
  width: 164px; 
  height: 164px; 
  position:absolute; 
  left:208px; 
  bottombottom: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; 
  bottombottom:107px; 
 } 
 #gear11{ 
  background: url(FgFnjks.png) no-repeat 0 -356px; 
  width: 125px; 
  height: 124px; 
  position:absolute; 
  left:228px; 
  bottombottom: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; 
  bottombottom:123px; 
 } 
 #gear8{ 
  background: url(FgFnjks.png) no-repeat -371px -158px; 
  width: 72px; 
  height: 72px; 
  position:absolute; 
  left:254px; 
  bottombottom: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; 
  bottombottom:146px; 
 } 
  
 /*gear1*/ 
 #gear1{ 
  background: url(FgFnjks.png) no-repeat 0 0; 
  width: 135px; 
  height: 134px; 
  position:absolute; 
  left:83px; 
  bottombottom: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;     

    
    
        基于HTML5的齿轮动画特效_html5教程技巧
        基于HTML5的齿轮动画特效_html5教程技巧:这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现
        推荐度：
    
    
        
            点击下载本文
            文档为doc格式
        
    

              
        
                
            标签：
                        教程
                        html5
                        动画效果
                    
                
            
             
                    
                        热门焦点

                    
                    
                        
                            
                            
                            
                        
                        
                    
            
            
        
        
        
        
            
            
                最新推荐
                
                    
                
                
                
            
            
            
            
            
                猜你喜欢
                
                    
                    
                   
                    
                
            
           
            
            
           
            
                热门推荐
                
                    
                    
                
            
           
            
        
        
        专题

    















    



    
         
            产品服务
            发展历程
            企业资讯
            企业文化
            关于我们
            加入我们
            联系我们
            网站导航
            网站律师
        
        
            
                 
                     
             
             
                 
                     
             
             
                 
                     
             
             
                 
                     
             
             
                 
                     中国扫黄打非网
                 
             
        
         
            
            Copyright © 2019-2025 51dongshi.net 版权所有
            
                赣ICP备2023002352号-34
            
            违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
            
        
    




Top