Comment obtenir un effet pluie de météores avec CSS3 ? (exemple de code)

Cet article expliquera comment utiliser CSS3 pour obtenir l'effet pluie de météores à travers des exemples de code. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

[Tutoriel recommandé : Tutoriel vidéo CSS]

Remarque : Le texte ne parle que de l'implémentation d'une seule méthode de pluie de météores, plusieurs effets n'ont besoin que de modifier légèrement le point de départ et la largeur d'une seule animation. Pour des exemples spécifiques, voir l'adresse github à la fin de l'article.

Facteur de difficulté

☆☆☆☆☆

Rendu

Idées

La mise en œuvre d'une pluie de météores est divisée en trois parties :

(1) Utilisez l'attribut border pour implémenter un triangle rectangle. Pour la mise en œuvre des triangles, vous pouvez vous référer au CSS pour dessiner des triangles

(2) Ajouter un effet circulaire au triangle rectangle et affaiblir les bords de la forme rectangle

(3) Ajoutez des effets d'animation pour faire bouger le triangle rectangle

HTML

<span class="shooting-star animation"></span>

Analyse :

• html Juste ajouter un conteneur d'animation

CSS

.shooting-star {
    margin: 30px;
    display: block;
    width: 0;
    border-radius: 2px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: transparent;
    border-left-width: 230px;
    border-left-style: solid;
    border-left-color: white;
    border-right-width: 230px;
    border-right-style: solid;
    border-right-color: transparent;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: white;
}
.animation {
    animation: fly 3s infinite;
}
@keyframes fly {
    from {
        margin-left: 900px;
        border-left-width: 130px;
        border-right-width: 130px;
    }
    to {
        margin-left: -900px;
        border-left-width: 360px;
        border-right-width: 360px;
    }
}

Analyse :

• Triangle rectangle
  • Pour réaliser le triangle rectangle, déterminez d'abord l'orientation de l'angle droit. Dans cet exemple, l'orientation du triangle rectangle est le coin inférieur gauche, définissez donc les bordures gauche et inférieure à colorer, ainsi que les bordures droite et supérieure. pour être transparent
  • L'étoile filante a la forme d'une ligne, donc le triangle rectangle a une petite hauteur et une grande largeur. Par conséquent, les valeurs de largeur de bordure gauche et droite définies ici sont très grandes et les valeurs de largeur de bordure supérieure et inférieure sont très petites
  • Pour les éléments comme span dont la valeur d'attribut d'affichage par défaut n'est pas block, vous besoin de définir l'attribut d'affichage sur block
• Effet circulaire
  • Définir la bordure circulaire via border-radius La valeur de border-radius peut être la même que la hauteur. du triangle rectangle (notez que la valeur de hauteur doit être la somme des valeurs bordure-haut-largeur et bordure-bas-largeur)
• Effet d'animation
  • Définissez la valeur initiale et les positions finales de l'animation par margin-left
  • En changeant border-*-width La valeur obtient l'effet de changer la longueur du météore
  • La durée de l'animation détermine le temps du météore à passer par l'interface
  • Le nombre d'animations est réglé sur illimité

Points de connaissances

• Implémentation CSS des triangles
• bordure arrondie
• animation Ajouter des effets d'animation
• @keyframes Animation personnalisée

Code source Gitbub :

https://github.com/nanzhangren/CSS_skills/blob/master /shooting_star/shooting_star.html

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

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!