Comment créer des effets d'animation des planètes du système solaire avec h5 et c3

Cette fois, je vais vous montrer comment utiliser h5 et c3 pour créer l'effet d'animation des planètes du système solaire. Quelles sont les précautions pour utiliser h5 et c3 pour créer l'effet d'animation du système solaire. planètes du système solaire. Voici les cas pratiques.

Réalisez une animation du mouvement des huit planètes du système solaire, à l'exclusion des satellites des planètes. Toutes les planètes tournent autour du soleil. Les planètes utilisent des couleurs solides et n'ont pas de rotation pour le moment.

L'animation comprend : le soleil et les planètes, leurs orbites et les animations de révolution planétaire.

Dessinez d'abord un croquis, concevez la taille et la position, et calculez le temps d'exécution de l'animation en fonction de la période de révolution.

Structure HTML :

Un div avec la classe solarsys, en tant qu'élément conteneur du système solaire, la position du div est relative.

Les orbites planétaires et les planètes sont toutes deux en div, et la position est absolue.

Le conteneur utilise un positionnement relatif et les éléments internes utilisent un positionnement absolu. Il est relativement simple d'obtenir l'effet. L'inconvénient est que la taille est fixe.

<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 du div du conteneur du système solaire :

Largeur fixe, hauteur fixe, positionnement relatif et alignement dans la page.

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

CSS du sun div :

Définissez la largeur, la hauteur, la gauche et le haut en fonction de la taille et de la position du motif.

Définir la couleur.

Convertissez un carré en cercle en générant le rayon de bordure de 50 %.

Obtenez un halo solaire avec les paramètres de couleur à 4 couches de 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 du div orbite planétaire :

Supposons que ce soit l'orbite de Mercure.

Définissez la largeur, la hauteur, la gauche et le haut en fonction de la taille et de la position du motif.

La couleur de fond est transparente.

Convertissez un carré en cercle en générant le rayon de bordure de 50 %.

Définissez le type de bordure sur ligne pointillée.

Réglez la couleur de la bordure sur gris.

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

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

À propos du fonctionnement des barres de défilement en HTML

Comment créer des tableaux à lignes fines en HTML

Quels sont les modes d'affichage des balises HTML au niveau des blocs, des balises en ligne et des balises de bloc en ligne

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!