Wie man mit h5 und c3 Animationseffekte der Planeten im Sonnensystem erstellt

Dieses Mal zeige ich Ihnen, wie Sie mit h5 und c3 den Animationseffekt der Planeten im Sonnensystem erzeugen. Was sind die Vorsichtsmaßnahmen für die Verwendung von h5 und c3, um den Animationseffekt zu erzeugen? Hier sind die praktischen Fälle.

Erstellen Sie eine Animation der Bewegung der acht Planeten im Sonnensystem, mit Ausnahme der Planeten, die sich um die Sonne drehen. Die Planeten verwenden vorerst keine Rotation.

Die Animation umfasst: die Sonne und Planeten, ihre Umlaufbahnen und Animationen zur Planetenrevolution.

Zeichnen Sie zunächst eine Skizze, entwerfen Sie Größe und Position und berechnen Sie die Ausführungszeit der Animation basierend auf dem Umdrehungszyklus.

Die Struktur von HTML:

Ein Div mit der Klasse solarsys, als Containerelement des Sonnensystems, die Position des Div ist relativ.

Planetenbahnen und Planeten sind beide in Div angegeben und die Position ist absolut.

Der Container verwendet eine relative und die internen Elemente verwenden eine absolute Positionierung. Der Effekt ist relativ einfach. Der Nachteil besteht darin, dass die Größe festgelegt ist.

<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>

CSS des Solarsystem-Containers div:

Feste Breite, feste Höhe, relative Positionierung und Ausrichtung innerhalb der Seite.

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

CSS des Sonnendivs:

Stellen Sie die Breite, Höhe, links und oben entsprechend der Größe und Position des Designs ein.

Farbe festlegen.

Konvertieren Sie ein Quadrat in einen Kreis, indem Sie den Randradius um 50 % generieren.

Erzielen Sie einen solaren Halo mit den 4-Ebenen-Farbeinstellungen von Box-Shadow.

.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 der Planetenumlaufbahn div:

Angenommen, es handelt sich um die Umlaufbahn von Merkur.

Stellen Sie Breite, Höhe, links und oben entsprechend der Größe und Position des Designs ein.

Die Hintergrundfarbe ist transparent.

Konvertieren Sie ein Quadrat in einen Kreis, indem Sie den Randradius um 50 % generieren.

Stellen Sie den Rahmentyp auf gepunktete Linie ein.

Stellen Sie die Farbe des Randes auf Grau ein.

.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;   
        }

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Über die Bedienung von Bildlaufleisten in HTML

Wie man dünne Linientabellen in HTML erstellt

Welche Anzeigemodi gibt es für HTML-Tags auf Blockebene, Inline-Tags und Inline-Block-Tags?

Das obige ist der detaillierte Inhalt vonWie man mit h5 und c3 Animationseffekte der Planeten im Sonnensystem erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!