牛叉的HTML5齒輪轉動動畫[酷]

2024-09-05 12:19:10

字體：大中小

來源：轉載

供稿：網友

HTML5動畫效果一例，很牛叉的HTML5動畫效果，轉動的齒輪，還有吊輪上升效果，另外還有那些轉動機構部分的動畫效果也想當逼真，不得不贊一下HTML5的強大動畫功能哦，對此感興趣的，你可好好研究下代碼。

<html><head> <meta charset="gb2312"><title>CSS3實現齒輪轉動動畫特效</title><style>body{	margin:0px;	padding:0px;	overflow:hidden;	background: #196a73;	background-image:url(/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(/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(/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(/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(/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(/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(/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(/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(/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(/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(/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(/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(/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(/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(/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(/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(/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(/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(/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   class="cwywi8a"   id="level">		<div   class="qkwaaii"   id="content">			<div   class="i6ggemc"   id="gears">				<div   class="a6ciios"   id="gears-static"></div>				<div   class="esm6asy"   id="gear-system-1">					<div   id="oayks2y"   class="shadow" id="shadow15"></div>					<div   class="qamcyui"   id="gear15"></div>					<div   id="yogcomc"   class="shadow" id="shadow14"></div>					<div   class="oy4u4sg"   id="gear14"></div>					<div   id="q2is2iu"   class="shadow" id="shadow13"></div>					<div   class="ceeg0q8"   id="gear13"></div>				</div>				<div   class="gky2goi"   id="gear-system-2">					<div   id="q4qkm42"   class="shadow" id="shadow10"></div>					<div   class="kicq6is"   id="gear10"></div>					<div   id="4uawweu"   class="shadow" id="shadow3"></div>					<div   class="ism2g0q"   id="gear3"></div>				</div>				<div   class="cqy2sso"   id="gear-system-3">					<div   id="oeo2440"   class="shadow" id="shadow9"></div>					<div   class="08goiow"   id="gear9"></div>					<div   id="aogsae4"   class="shadow" id="shadow7"></div>					<div   class="cusmquw"   id="gear7"></div>				</div>				<div   class="gw66eoa"   id="gear-system-4">					<div   id="qoi0egm"   class="shadow" id="shadow6"></div>					<div   class="sqago6o"   id="gear6"></div>					<div   class="80y26ek"   id="gear4"></div>				</div>				<div   class="auioyoi"   id="gear-system-5">					<div   id="yccc8iw"   class="shadow" id="shadow12"></div>					<div   class="ceg8kqe"   id="gear12"></div>					<div   id="isiiq2o"   class="shadow" id="shadow11"></div>					<div   class="iookasu"   id="gear11"></div>					<div   id="uqc40ki"   class="shadow" id="shadow8"></div>					<div   class="0mwgwyu"   id="gear8"></div>				</div>				<div   id="uuyia4g"   class="shadow" id="shadow1"></div>				<div   class="sooiooi"   id="gear1"></div>				<div   class="wi4mugm"   id="gear-system-6">					<div   id="scsiqqq"   class="shadow" id="shadow5"></div>					<div   class="wigwkus"   id="gear5"></div>					<div   class="ci00u64"   id="gear2"></div>				</div>				<div   id="qesqw88"   class="shadow" id="shadowweight"></div>				<div   class="ui242ug"   id="chain-circle"></div>				<div   class="qi6s0wa"   id="chain"></div>				<div   class="aa4k0w8"   id="weight"></div>			</div>		</div>	</div></div></body></html>

上一篇：HTML5環境amcharts.js餅圖插件演示效果

下一篇：8種超炫的html5 Loading加載圖標動畫