h5 と c3 を使用して太陽系の惑星のアニメーション効果を作成する方法-htmlチュートリアル-php.cn

h5 と c3 を使用して太陽系の惑星のアニメーション効果を作成する方法

php中世界最好的语言

リリース： 2018-01-23 09:50:22

オリジナル

3154 人が閲覧しました

今回は、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);   
        }

ログイン後にコピー

太陽divのCSS:

デザインしたサイズと位置に従って、幅、高さ、左、上を設定します。

色を設定します。

境界線の半径を 50% 生成して、正方形を円に変換します。

box-shadow の 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;   
        }

ログイン後にコピー

惑星軌道 div の CSS:

それが水星の軌道であると仮定します。

デザインのサイズと位置に合わせて、幅、高さ、左、上を設定します。

背景色は透明です。

境界線の半径の 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 中国語 Web サイトの他の関連記事に注目してください。