CSS3实现齿轮转动动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现齿轮转动动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head> 
<meta charset="gb2312">
<link href="css/zzsc.css" rel="stylesheet">
<title>CSS3实现齿轮转动动画特效</title>
</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>
</body>
</html>

CSS代码(zzsc.css):

body{margin:0px;padding:0px;overflow:hidden;background:#196a73;/* Old browsers */
background-image:url(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(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(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;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(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(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(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(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(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(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(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(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(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;}
}

附件:下载该文件资源,减少时间成本(增值服务)