집 >웹 프론트엔드 >HTML 튜토리얼 >h5 및 c3를 사용하여 태양계 행성의 애니메이션 효과를 만드는 방법

h5 및 c3를 사용하여 태양계 행성의 애니메이션 효과를 만드는 방법

php中世界最好的语言원래의: 2018-01-23 09:50:223124검색

이번에는 h5와 c3를 사용하여 태양계 행성의 움직임을 애니메이션화하는 방법을 보여 드리겠습니다. h5와 c3를 사용하여 태양계 행성의 움직임을 애니메이션화할 때의 주의 사항은 무엇입니까? 사례를 살펴보겠습니다.

행성의 위성을 제외하고 태양계의 8개 행성의 움직임을 애니메이션으로 만들어보세요. 모든 행성은 단색을 사용하고 당분간 회전하지 않습니다.

애니메이션에는 태양과 행성, 궤도, 행성 혁명 애니메이션이 포함됩니다.

먼저 스케치를 그리고 크기와 위치를 디자인하고 회전주기에 따라 애니메이션 실행시간을 계산합니다.

html 구조:

solarsys 클래스가 있는 div는 태양계 컨테이너 요소이므로 div의 위치는 상대적입니다.

행성 궤도와 행성은 모두 div에 있으며 위치는 절대값입니다.

컨테이너는 상대 위치를 사용하고 내부 요소는 절대 위치 지정을 사용합니다. 단점은 크기가 고정되어 있다는 것입니다.

<div class="solarsys">  
        <!--太阳-->  
        <div class=&#39;sun&#39;></div>  
  
        <!--水星轨道-->  
        <div class=&#39;mercuryOrbit&#39;></div>  
  
        <!--水星-->  
        <div class=&#39;mercury&#39;></div>  
  
        <!--金星轨道-->  
        <div class=&#39;venusOrbit&#39;></div>  
  
        <!--金星-->  
        <div class=&#39;venus&#39;></div>  
  
        <!--地球轨道-->  
        <div class=&#39;earthOrbit&#39;></div>  
  
        <!--地球-->  
        <div class=&#39;earth&#39;></div>  
  
        <!--火星轨道-->  
        <div class=&#39;marsOrbit&#39;></div>  
  
        <!--火星-->  
        <div class=&#39;mars&#39;></div>  
  
        <!--木星轨道-->  
        <div class=&#39;jupiterOrbit&#39;></div>  
  
        <!--木星-->  
        <div class=&#39;jupiter&#39;></div>  
  
        <!--土星轨道-->  
        <div class=&#39;saturnOrbit&#39;></div>  
  
        <!--土星-->  
        <div class=&#39;saturn&#39;></div>  
  
        <!--天王星轨道-->  
        <div class=&#39;uranusOrbit&#39;></div>  
  
        <!--天王星-->  
        <div class=&#39;uranus&#39;></div>  
  
        <!--海王星轨道-->  
        <div class=&#39;neptuneOrbit&#39;></div>  
  
        <!--海王星-->  
        <div class=&#39;neptune&#39;></div>  
    </div>

태양계 컨테이너 div의 Css:

고정 너비, 고정 높이, 상대 위치 지정 및 페이지 내 및 극 내 정렬.

.solarsys{   
            width: 800px;   
            height: 800px;;   
            position: relative;   
            margin: 0 auto;   
            background-color: #000000;   
            padding: 0;   
            transform: scale(1);   
        }

sun div의 Css:

디자인한 크기와 위치에 따라 너비, 높이, 왼쪽, 위쪽을 설정합니다.

색상을 설정하세요.

테두리 반경의 50%를 생성하여 정사각형을 원으로 변환합니다.

박스 섀도우의 4레이어 색상 설정으로 태양광을 구현하세요.

.sun {   
            left:357px;   
            top:357px;   
            height: 90px;   
            width: 90px;   
            background-color: rgb(248,107,35);   
            border-radius: 50%;   
            box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);   
            position: absolute;   
            margin: 0;   
        }

css for planet 궤도 div:

수성의 궤도라고 가정합니다.

디자인의 크기와 위치에 따라 너비, 높이, 왼쪽, 위쪽을 설정하세요.

배경색은 투명합니다.

테두리 반경의 50%를 생성하여 정사각형을 원으로 변환합니다.

테두리 유형을 점선으로 설정하세요.

보더 색상을 회색으로 설정하세요.

.mercuryOrbit {   
            left:342.5px;   
            top:342.5px;   
            height: 115px;   
            width: 115px;   
            background-color: transparent;   
            border-radius: 50%;   
            border-style: dashed;   
            border-color: gray;   
            position: absolute;   
            border-width: 1px;   
            margin: 0px;   
            padding: 0px;   
        }

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!