지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > 본문

HTML5_html5 튜토리얼 기술을 기반으로 한 기어 애니메이션 특수 효과

WBOY
풀어 주다： 2016-05-16 15:45:54
원래의
1590명이 탐색했습니다.

HTML5 기반의 기어 애니메이션 특수 효과입니다. 기어 회전의 물리적 원리를 HTML5 코드로 변환하고, 시뮬레이션된 기어 회전의 애니메이션 효과를 웹 페이지에 구현합니다. 이 기어 애니메이션의 가장 큰 특징은 여러 기어로 구성되어 기어 전달에 대한 알고리즘 요구 사항이 크게 증가한다는 것입니다. 또한 이를 구현하기 위해 JavaScript가 아닌 순수 CSS3를 사용했습니다.

HTML 코드

XML/HTML 코드클립보드에 콘텐츠 복사
  1. <div id="레벨" >  
  2.  <div id="content" >  
  3.   <div id="gears" >  
  4.    <div id="gears- static">div>  
  5.    <div id="gear- 시스템-1">  
  6.     <div class="shadow"  id="shadow15">div>  
  7.     <div id="gear15" >div>  
  8.     <div class="shadow"  id="shadow14">div>  
  9.     <div id="gear14" >div>  
  10.     <div class="shadow"  id="shadow13">div>  
  11.     <div id="gear13" >div>  
  12.    div>  
  13.    <div id="gear- 시스템-2">  
  14.     <div class="shadow"  id="shadow10">div>  
  15.     <div id="gear10" >div>  
  16.     <div class="shadow"  id="shadow3">div>  
  17.     <div id="gear3" >div>  
  18.    div>  
  19.    <div id="gear- 시스템-3">  
  20.     <div class="shadow"  id="shadow9">div>  
  21.     <div id="gear9" >div>  
  22.     <div class="shadow"  id="shadow7">div>  
  23.     <div id="gear7" >div>  
  24.    div>  
  25.    <div id="gear- 시스템-4">  
  26.     <div class="shadow"  id="shadow6">div>  
  27.     <div id="gear6" >div>  
  28.     <div id="gear4" >div>  
  29.    div>  
  30.    <div id="gear- 시스템-5">  
  31.     <div class="shadow"  id="shadow12">div>  
  32.     <div id="gear12" >div>  
  33.     <div class="shadow"  id="shadow11">div>  
  34.     <div id="gear11" >div>  
  35.     <div class="shadow"  id="shadow8">div>  
  36.     <div id="gear8" >div>  
  37.    div>  
  38.    <div class="shadow"  id="shadow1">div>  
  39.    <div id="gear1" >div>  
  40.    <div id="gear- system-6">  
  41.     <div class="shadow"  id="shadow5">div>  
  42.     <div id="gear5" >div>  
  43.     <div id="gear2" >div>  
  44.    div>  
  45.    <div class="shadow"  id="shadowweight">div>  
  46.    <div id="chain- Circle">div>  
  47.    <div id="체인" >div>  
  48.    <div id="체중" >div>  
  49.   div>  
  50.  div>  
  51. div>  

CSS 코드

CSS 코드클립보드에 콘텐츠 복사
  1. #레벨{   
  2.  너비:100%;   
  3.  높이:1px;   
  4.  위치:절대;   
  5.  상위:50%;   
  6. }   
  7. #콘텐츠t{   
  8.  텍스트 정렬:가운데;   
  9.  여백-상단:-327px;   
  10. }   
  11. #기어{   
  12.  너비:478px;   
  13.  높이:655px;   
  14.  직위:친척;   
  15.  디스플레이:인라인-차단;   
  16.  세로 정렬:가운데;   
  17. }   
  18. #gears-정적{   
  19.  배경:url(FgFnjks.png) 반복 금지  -363px -903px;   
  20.  너비:329px;   
  21.  높이:602px;   
  22.  위치:절대;   
  23.  하단하단:5px;   
  24.  맞습니다맞습니다:0px;   
  25.  불투명도:0.4;   
  26. }   
  27. #제목{   
  28.  세로 정렬:가운데;   
  29.  색상:#9EB7B5;   
  30.  너비:43%;   
  31.  디스플레이:인라인-차단;   
  32. }  
  33. #제목 h1{   
  34.  글꼴 계열: 'PTSansNarrowBold', sans-serif ;   
  35.  글꼴 크기:3.6em;   
  36.  text-shadow:rgba(0, 0, 0, 0.36) 7px 7픽셀 10픽셀;   
  37. }   
  38. #제목 p{   
  39.  글꼴군: 산세리프;   
  40.  글꼴 크기:1.2em;   
  41.  줄 높이:148%;   
  42.  text-shadow:rgba(0, 0, 0, 0.36) 1px 1픽셀 0픽셀;   
  43. }   
  44.   
  45. .shadow{   
  46.  -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
  47.  -moz-box-shadow: 4픽셀 7픽셀 25픽셀 10px rgba(43, 36, 0, 0.36);   
  48.  box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);   
  49. }   
  50.   
  51. /*gear-system-1*/  
  52. #gear15{   
  53.  배경: url(FgFnjks.png) 반복 금지  0 -993px;   
  54.  너비: 321px;   
  55.  높이: 321px;   
  56.  위치:절대;   
  57.  왼쪽:45px;   
  58.  상단:179px;   
  59.   
  60. -webkit-animation: 뒤로 회전 24000ms 선형 무한;   
  61.  -moz-animation: 뒤로 회전 24000ms 선형 무한;   
  62.  -ms-animation: 뒤로 회전 24000ms 선형 무한;   
  63.  애니메이션: 뒤로 회전 24000ms 선형 무한;   
  64. }  
  65. #shadow15{   
  66.  너비:306px;   
  67.  높이:306px;   
  68.  -웹킷-테두리-반경:153px;   
  69.  -moz-테두리-반경:153px;   
  70.  테두리-반경:153px;   
  71.  위치:절대;   
  72.  왼쪽:52px;   
  73.  상단:186px;   
  74. }   
  75. #gear14{   
  76.  배경: url(FgFnjks.png) 반복 금지  0 -856px;   
  77.  너비: 87px;   
  78.  높이: 87px;   
  79.  위치:절대;   
  80.  왼쪽:162px;   
  81.  상단:296px;   
  82. }   
  83. #shadow14{   
  84.  너비:70px;   
  85.  높이:70px;   
  86.  -웹킷-테두리-반경:35px;   
  87.  -moz-테두리-반경:35px;   
  88.  테두리-반경:35px;   
  89.  위치:절대;   
  90.  왼쪽:171px;   
  91.  상단:304px;   
  92. }  
  93. #gear13{   
  94.  배경: url(FgFnjks.png) 반복 금지  0 -744px;   
  95.  너비: 62px;   
  96.  높이: 62px;   
  97.  위치:절대;   
  98.  왼쪽:174px;   
  99.  상단:309px;   
  100.   
  101. -webkit-animation: 8000ms 선형 무한 회전;   
  102. -moz-animation: 8000ms 선형 무한 회전;   
  103.  -ms-animation: 8000ms 선형 무한 회전;   
  104.  애니메이션: 8000ms 선형 무한 회전;   
  105. }   
  106. #shadow13{   
  107.  너비:36px;   
  108.  높이:36px;   
  109.  -웹킷-테두리-반경:18px;   
  110.  -moz-테두리-반경:18px;   
  111.  테두리-반경:18px;   
  112.  위치:절대;   
  113.  왼쪽:187px;   
  114.  상단:322px;   
  115. }   
  116.   
  117. /*gear-system-2*/  
  118. #gear10{   
  119.  배경: url(FgFnjks.png) 반복 금지  0 -184px;   
  120.  너비: 122px;   
  121.  높이: 122px;   
  122.  위치:절대;   
  123.  왼쪽:175px;   
  124.  상위:0;   
  125.   
  126. -webkit-animation: 8000ms 선형 무한대 뒤로 회전;   
  127.  -moz-animation: 뒤로 회전 8000ms 선형 무한;   
  128.  -ms-animation: 뒤로 회전 8000ms 선형 무한;   
  129.  애니메이션: 뒤로 회전 8000ms 선형 무한;   
  130. }  
  131. #shadow10{   
  132.  너비:86px;   
  133.  높이:86px;   
  134.  -웹킷-테두리-반경:43px;   
  135.  -moz-테두리-반경:43px;   
  136.  테두리-반경:43px;   
  137.  위치:절대;   
  138.  왼쪽:193px;   
  139.  상단:18px;   
  140. }   
  141. #gear3{   
  142.  배경: url(FgFnjks.png) 반복 금지  0 -1493px;   
  143.  너비: 85px;   
  144.  높이: 84px;   
  145.  위치:절대;   
  146.  왼쪽:194px;   
  147.  상단:19px;   
  148.   
  149. -webkit-animation: 10000ms 선형 무한 회전;   
  150. -moz-animation: 10000ms 선형 무한 회전;   
  151. -ms-animation: 10000ms 선형 무한 회전;   
  152.  애니메이션: 10000ms 선형 무한 회전;   
  153. }   
  154. #shadow3{   
  155.  너비:60px;   
  156.  높이:60px;   
  157.  -웹킷-테두리-반경:30px;   
  158.  -moz-테두리-반경:30px;   
  159.  테두리-반경:30px;   
  160.  위치:절대;   
  161.  왼쪽:206px;   
  162.  상단:31px;   
  163. }  
  164.   
  165. /*gear-system-3*/  
  166. #gear9{   
  167.  배경: url(FgFnjks.png) 반복 금지  -371픽셀 -280픽셀;   
  168.  너비: 234px;   
  169.  높이: 234px;   
  170.  위치:절대;   
  171.  왼쪽:197px;   
  172.  상단:96px;   
  173.   
  174. -webkit-animation: 12000ms 선형 무한 회전;   
  175. -moz-animation: 12000ms 선형 무한 회전;   
  176.  -ms-animation: 12000ms 선형 무한 회전;   
  177.  애니메이션: 12000ms 선형 무한 회전;   
  178. }   
  179. #shadow9{   
  180.  너비:200px;   
  181.  높이:200px;   
  182.  -웹킷-테두리-반경:100px;   
  183.  -moz-테두리-반경:100px;   
  184.  테두리-반경:100px;   
  185.  위치:절대;   
  186.  왼쪽:214px;   
  187.  상단:113px;   
  188. }   
  189. #gear7{   
  190.  배경: url(FgFnjks.png) 반복 금지  -371px 0;   
  191.  너비: 108px;   
  192.  높이: 108px;   
  193.  위치:절대;   
  194.  왼쪽:260px;   
  195.  상단:159px;   
  196.   
  197.  -webkit-animation: 뒤로 회전 10000ms 선형 무한;   
  198.  -moz-animation: 뒤로 회전 10000ms 선형 무한;   
  199.  -ms-animation: 뒤로 회전 10000ms 선형 무한;   
  200.  애니메이션: 뒤로 회전 10000ms 선형 무한;   
  201. }  
  202. #shadow7{   
  203.  너비:76px;   
  204.  높이:76px;   
  205.  -웹킷-테두리-반경:38px;   
  206.  -moz-테두리-반경: 38px;   
  207.  테두리-반경: 38px;   
  208.  위치:절대;   
  209.  왼쪽:276px;   
  210.  상단:175px;   
  211. }   
  212.   
  213. /*gear-system-4*/  
  214. #gear6{   
  215.  배경: url(FgFnjks.png) 반복 금지  0 -1931px;   
  216.  너비: 134px;   
  217.  높이: 134px;   
  218.  위치:절대;   
  219.  왼쪽:305px;   
  220.  하단하단:212px;   
  221.   
  222.  -webkit-animation: 뒤로 회전 10000ms 선형 무한;   
  223.  -moz-animation: 뒤로 회전 10000ms 선형 무한;   
  224.  -ms-animation: 뒤로 회전 10000ms 선형 무한;   
  225.  애니메이션: 뒤로 회전 10000ms 선형 무한;   
  226. }   
  227. #shadow6{   
  228.  너비:98px;   
  229.  높이:98px;   
  230.  -웹킷-테두리-반경:49px;   
  231.  -moz-테두리-반경: 49px;   
  232.  테두리-반경: 49px;   
  233.  위치:절대;   
  234.  왼쪽:323px;   
  235.  하단하단:230px;   
  236. }  
  237. #gear4{   
  238.  배경: url(FgFnjks.png) 반복 금지  0 -1627px;   
  239.  너비: 69px;   
  240.  높이: 69px;   
  241.  위치:절대;   
  242.  왼쪽:337px;   
  243.  하단하단:245px;   
  244.   
  245.  -webkit-animation: 뒤로 회전 10000ms 선형 무한;   
  246.  -moz-animation: 뒤로 회전 10000ms 선형 무한;   
  247.  -ms-animation: 뒤로 회전 10000ms 선형 무한;   
  248.  애니메이션: 뒤로 회전 10000ms 선형 무한;   
  249. }   
  250.   
  251. /*gear-system-5*/  
  252. #gear12{   
  253.  배경: url(FgFnjks.png) 반복 금지  0 -530px;   
  254.  너비: 164px;   
  255.  높이: 164px;   
  256.  위치:절대;   
  257.  왼쪽:208px;   
  258.  하단하단:85px;   
  259.   
  260. -webkit-animation: 8000ms 선형 무한 회전;   
  261. -moz-animation: 8000ms 선형 무한 회전;   
  262.  -ms-animation: 8000ms 선형 무한 회전;   
  263.  애니메이션: 8000ms 선형 무한 회전;   
  264. }  
  265. #shadow12{   
  266.  너비:124px;   
  267.  높이:124px;   
  268.  -웹킷-테두리-반경:62px;   
  269.  -moz-테두리-반경:62px;   
  270.  테두리-반경:62px;   
  271.  위치:절대;   
  272.  왼쪽:225px;   
  273.  하단하단:107px;   
  274. }   
  275. #gear11{   
  276.  배경: url(FgFnjks.png) 반복 금지  0 -356px;   
  277.  너비: 125px;   
  278.  높이: 124px;   
  279.  위치:절대;   
  280.  왼쪽:228px;   
  281.  하단하단:105px;   
  282.   
  283.  -webkit-animation: 뒤로 회전 10000ms 선형 무한;   
  284.  -moz-animation: 뒤로 회전 10000ms 선형 무한;   
  285.  -ms-animation: 뒤로 회전 10000ms 선형 무한;   
  286.  애니메이션: 뒤로 회전 10000ms 선형 무한;   
  287. }   
  288. #shadow11{   
  289.  너비:88px;   
  290.  높이:88px;   
  291.  -웹킷-테두리-반경:44px;   
  292.  -moz-테두리-반경:44px;   
  293.  테두리-반경:44px;   
  294.  위치:절대;   
  295.  왼쪽:247px;   
  296.  하단하단:123px;   
  297. }  
  298. #gear8{   
  299.  배경: url(FgFnjks.png) 반복 금지  -371px -158px;   
  300.  너비: 72px;   
  301.  높이: 72px;   
  302.  위치:절대;   
  303.  왼쪽:254px;   
  304.  하단하단:131px;   
  305.   
  306. -webkit-animation: 6000ms 선형 무한 회전;   
  307. -moz-animation: 6000ms 선형 무한 회전;   
  308. -ms-animation: 6000ms 선형 무한 회전;   
  309.  애니메이션: 6000ms 선형 무한 회전;   
  310. }   
  311. #shadow8{   
  312.  너비:42px;   
  313.  높이:42px;   
  314.  -웹킷-테두리-반경:21px;   
  315.  -moz-테두리-반경: 21px;   
  316.  테두리-반경: 21px;   
  317.  위치:절대;   
  318.  왼쪽:269px;   
  319.  하단하단:146px;   
  320. }  
  321.   
  322. /*gear1*/  
  323. #gear1{   
  324.  배경: url(FgFnjks.png) 반복 금지  0 0;   
  325.  너비: 135px;   
  326.  높이: 134px;   
  327.  위치:절대;   
  328.  왼쪽:83px;   
  329.  하단하단:111px;   
  330.   
  331.  -webkit-animation: 뒤로 회전 10000ms 선형 무한;   
  332.  -moz-animation: 뒤로 회전 10000ms 선형 무한;   
  333.  -ms-animation: 뒤로 회전 10000ms 선형 무한;   
  334.  애니메이션: 뒤로 회전 10000ms 선형 무한;   
  335. }   
  336. #shadow1{   
  337.  너비:96px;   
  338.  높이:96px;   
  339.  -웹킷-테두리-반경:48px;   
  340.  -moz-테두리-반경:48px;   
  341.  테두리-반경:48px;   
관련 라벨：
html5
원천：php.cn
이전 기사：HTML5의 WebSocket 및 서버 푸시 events_html5 튜토리얼 기술에 대한 간략한 분석 다음 기사：HTML5_html5 튜토리얼 스킬에서 Communication API의 기본 사용법에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
내 이미지를 페이지의 기본 디스플레이에 표시하려면 어떻게 해야 합니까? 제가 하고 싶은 것은 NASAAPI를 사용하여 사진 몇 장을 받는 것입니다. 이 사진은 내 페이지의 썸네일과 메인 디스플레이에 표시됩니다. 코드가 썸네일에서 이미...
에서 2024-04-06 15:33:12
0
1
433
PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...
에서 2024-04-05 12:57:00
0
1
456
HTML5에서 enctype과 formenctype의 차이점은 무엇입니까? HTMLLivingStandard(새 HTML5 사양이라고도 함)의 enctype 속성과 formenctype 속성의 차이점이 무엇인지 궁금합니다. 나는 개발자를...
에서 2024-04-02 11:47:56
0
1
275
페이지를 모바일 친화적으로 만드시겠습니까? 나는 많은 웹 페이지와 일부 웹 사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모...
에서 2024-04-01 20:42:38
0
1
259
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿