지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > HTML5模拟齿轮动画代码实例

HTML5模拟齿轮动画代码实例

PHP中文网
풀어 주다： 2017-03-31 15:17:34
원래의
1959명이 탐색했습니다.

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

 

　　 HTML代码

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

css代码

<FONT size=3>#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;
}
}</FONT>
로그인 후 복사

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

관련 라벨：
HTML5，齿轮动画
원천：php.cn
이전 기사：2015-2016前端架构体系技术精简版 다음 기사：React Native第一课
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2052
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2207
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1864
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1750
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1772
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿