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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<html>
<head> 
<meta charset="gb2312">
<title>CSS3实现齿轮转动动画特效</title>
<style>
body{
	margin:0px;
	padding:0px;
	overflow:hidden;
	background: #196a73;
	background-image:url(//ku.shouce.ren/files/images/201601/56a09264b82b7.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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(//ku.shouce.ren/files/images/201601/56a09264c7482.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

HTML5代码

描述

HTML5动画效果一例，很牛叉的HTML5动画效果，转动的齿轮，还有吊轮上升效果，另外还有那些转动机构部分的动画效果也想当逼真，不得不赞一下HTML5的强大动画功能哦，对此感兴趣的，你可好好研究下代码。