侵權(quán)舉報/版權(quán)申訴這是一個基于HTML5的齒輪動畫特效，我們將齒輪轉(zhuǎn)動的物理學(xué)原理，轉(zhuǎn)換為HTML5代碼，在網(wǎng)頁上實(shí)現(xiàn)了模擬齒輪轉(zhuǎn)動的動畫效果。該齒輪動畫的最大特點(diǎn)是它由好多個齒輪組成，這對齒輪傳動的算法要求就大大提高了，而且我們并沒有用......
以下是【金聰采編】分享的內(nèi)容全文：
以下是【金聰采編】分享的內(nèi)容全文：
這是一個基于HTML5的齒輪動畫特效，我們將齒輪轉(zhuǎn)動的物理學(xué)原理，轉(zhuǎn)換為HTML5代碼，在網(wǎng)頁上實(shí)現(xiàn)了模擬齒輪轉(zhuǎn)動的動畫效果。該齒輪動畫的最大特點(diǎn)是它由好多個齒輪組成，這對齒輪傳動的算法要求就大大提高了，而且我們并沒有用JavaScript，而是純CSS3實(shí)現(xiàn)的。
HTML代碼
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <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>
CSS代碼
CSS Code復(fù)制內(nèi)容到剪貼板
- #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;
- bottombottom:5px;
- rightright: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;
- bottombottom: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;
- bottombottom:230px;
- }
- #gear4{
- background: url(FgFnjks.png) no-repeat 0 -1627px;
- width: 69px;
- height: 69px;
- position:absolute;
- left:337px;
- bottombottom: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;
- bottombottom: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;
- bottombottom:107px;
- }
- #gear11{
- background: url(FgFnjks.png) no-repeat 0 -356px;
- width: 125px;
- height: 124px;
- position:absolute;
- left:228px;
- bottombottom: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;
- bottombottom:123px;
- }
- #gear8{
- background: url(FgFnjks.png) no-repeat -371px -158px;
- width: 72px;
- height: 72px;
- position:absolute;
- left:254px;
- bottombottom: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;
- bottombottom:146px;
- }
- /*gear1*/
- #gear1{
- background: url(FgFnjks.png) no-repeat 0 0;
- width: 135px;
- height: 134px;
- position:absolute;
- left:83px;
- bottombottom: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;
- bottombottom: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;
- bottombottom: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;
- bottombottom: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 {
- bottombottom: 0px;
- }
- to {
- bottombottom: 340px;
- }
- }
- @-moz-keyframes up {
- from {
- bottombottom: 0px;
- }
- to {
- bottombottom: 340px;
- }
- }
- @-webkit-keyframes "up" {
- from {
- bottombottom: 0px;
- }
- to {
- bottombottom: 340px;
- }
- }
- @-ms-keyframes "up" {
- from {
- bottombottom: 0px;
- }
- to {
- bottombottom: 340px;
- }
- }
- @-o-keyframes "up" {
- from {
- bottombottom: 0px;
- }
- to {
- bottombottom: 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;
- }
- }
純CSS3實(shí)現(xiàn)的齒輪動畫特效，希望大家喜歡。
