简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Detailed introduction to the code example details of HTML5 simulated gear animation

Detailed introduction to the code example details of HTML5 simulated gear animation

黄舟
黄舟Original
2017-03-06 15:25:511357browse

This is a gear animation special effect based on HTML5. We convert the physical principles of gear rotation into HTML5 code and implement the animation effect of simulated gear rotation on the web page. The biggest feature of this gear animation is that it is composed of multiple gears, which greatly increases the algorithm requirements for gear transmission. Moreover, we did not use JavaScript, but pure CSS3 to implement it.

Online demo source code download

HTML code

<p id="level">
	<p id="content">
		<p id="gears">
			<p id="gears-static"></p>
			<p id="gear-system-1">
				<p class="shadow" id="shadow15"></p>
				<p id="gear15"></p>
				<p class="shadow" id="shadow14"></p>
				<p id="gear14"></p>
				<p class="shadow" id="shadow13"></p>
				<p id="gear13"></p>
			</p>
			<p id="gear-system-2">
				<p class="shadow" id="shadow10"></p>
				<p id="gear10"></p>
				<p class="shadow" id="shadow3"></p>
				<p id="gear3"></p>
			</p>
			<p id="gear-system-3">
				<p class="shadow" id="shadow9"></p>
				<p id="gear9"></p>
				<p class="shadow" id="shadow7"></p>
				<p id="gear7"></p>
			</p>
			<p id="gear-system-4">
				<p class="shadow" id="shadow6"></p>
				<p id="gear6"></p>
				<p id="gear4"></p>
			</p>
			<p id="gear-system-5">
				<p class="shadow" id="shadow12"></p>
				<p id="gear12"></p>
				<p class="shadow" id="shadow11"></p>
				<p id="gear11"></p>
				<p class="shadow" id="shadow8"></p>
				<p id="gear8"></p>
			</p>
			<p class="shadow" id="shadow1"></p>
			<p id="gear1"></p>
			<p id="gear-system-6">
				<p class="shadow" id="shadow5"></p>
				<p id="gear5"></p>
				<p id="gear2"></p>
			</p>
			<p class="shadow" id="shadowweight"></p>
			<p id="chain-circle"></p>
			<p id="chain"></p>
			<p id="weight"></p>
		</p>
	</p>
</p>

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;
	bottom:5px;
	right:0px;
	opacity:0.4;
}
#title{
	vertical-align:middle;
	color:#9EB7B5;
	width:43%;
	display:inline-block;
}
#title h1{
	font-family: &#39;PTSansNarrowBold&#39;, 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;
 }
}


The above is a detailed introduction to the code example details of HTML5 simulated gear animation. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


##

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use Html5 to implement simple selection sorting algorithm and demonstration, with code attachedNext article：Use Html5 to implement simple selection sorting algorithm and demonstration, with code attached

Related articles

See more