masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Jadual Kandungan
HTML代码
CSS代码
Rumah hujung hadapan web Tutorial H5 详细介绍HTML5模拟齿轮动画的代码示例详情

详细介绍HTML5模拟齿轮动画的代码示例详情

黄舟
黄舟
Mar 06, 2017 pm 03:25 PM

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

在线演示源码下载

HTML代码

<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>
Salin selepas log masuk

CSS代码

#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;
 }
}
Salin selepas log masuk


以上就是详细介绍HTML5模拟齿轮动画的代码示例详情的内容，更多相关内容请关注PHP中文网（www.php.cn）！


Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Penyelesaian Riddle Seashell
2 minggu yang lalu By DDD
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?
7529
15
Tutorial CakePHP
1378
52
Apakah format nama akaun stim
82
11
kunci pengaktifan win11 kekal
54
19
Sambungan NYT menunjukkan dan jawapan
21
76
Tunjukkan Lagi
Related knowledge
Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles