Comment créer un effet d'animation d'étoile filante en utilisant CSS ?-tutoriel CSS-php.cn

Comment créer un effet d'animation d'étoile filante en utilisant CSS ?

WBOY

Libérer： 2023-09-05 09:33:22

avant

1330 Les gens l'ont consulté

Comment créer un effet danimation détoile filante en utilisant CSS ?

Les météores semblent être les signes scintillants de chaleur produits par ces petits frissons alors qu'ils scintillent dans le ciel nocturne froid. L’effet étoile filante est l’un des effets d’arrière-plan les plus uniques pour les sites Web à thème sombre. L’animation d’étoile filante est un excellent exemple d’écran de chargement qui peut retenir votre attention pendant longtemps pendant que le reste du contenu du site Web se charge. Cet effet peut être exploité dans les chargeurs de pages et les interfaces utilisateur.

Dans cet article, nous aborderons les moyens de créer un effet d'animation d'étoile filante à l'aide de CSS. Pour cela, nous utiliserons diverses propriétés CSS comme l'animation, le débordement, le filtre, la transformation, la nième propriété enfant, les pseudo-sélecteurs :before et :after.

Étapes à suivre

Voici les étapes pour créer un effet d'animation d'étoile filante -

Étape 1 - Créez le design de base de l'étoile en utilisant HTML. Créez un élément de section pour le ciel et neuf éléments

pour les étoiles.

Étape 2 - Pour faire tomber l'étoile à 45 degrés, utilisez la propriété Transform de l'élément Section.

Étape 3 - Alignez les éléments p selon vos besoins.

Étape 4 - Créez une boule en forme de beignet en utilisant des propriétés telles que les propriétés de position et de remplissage. Pour leur donner une forme circulaire, utilisez la propriété border-radius.

Étape 5 - Utilisez les pseudo-sélecteurs :before et :after pour spécifier les effets avant et après les étoiles

Étape 6 - Utilisez la nième sous-propriété pour ajouter une animation à l'étoile. Spécifie la position de chaque nième enfant.

Étape 7 - À l'aide de @keyframes, spécifiez la largeur de la tête et de la queue de l'étoile. Utilisez @-webkit-keyframes pour créer des effets de prise de vue.

Attributs utilisés

Nous avons utilisé les propriétés CSS suivantes -

: sélecteur de nième enfant(n)

:nth-child(n) est un sélecteur de pseudo-classe CSS utilisé pour faire correspondre les éléments en fonction de leur position au sein d'un groupe frère. Il correspond à tous les éléments du nième élément enfant. n peut être un nombre, un mot-clé ou n'importe quelle formule.

Grammaire

element :nth-child(n){
   Css declarations;
}

Copier après la connexion

Le paramètre "n" entre parenthèses indique le modèle de sélection ou de correspondance des éléments. Il peut s'agir d'un signe de fonction pair ou impair.

Les valeurs impaires représentent les éléments avec des positions impaires dans la série, telles que 1, 3, 5, etc. De même, les valeurs paires représentent les éléments avec un nombre pair dans la série, comme 2, 4, 6, etc.

Animation CSS

La propriété d'animation de CSS nous permet de modifier diverses propriétés de style d'un élément dans un certain intervalle de temps, lui donnant ainsi un effet d'animation.

@keyframes permet de préciser exactement ce qui se passe dans l'animation pendant une durée donnée. Cela se fait en déclarant des propriétés CSS pour certaines "frames" lors de l'animation, avec des pourcentages allant de 0% (début de l'animation) à 100% (fin de l'animation).

Propriétés du filtre

Il permet aux développeurs d'ajouter des effets visuels tels que l'opacité, le flou et la saturation aux éléments HTML.

Grammaire

filter: none | blur()| drop-shadow() | invert() | opacity() | saturate() | sepia() | url() | brightness()| contrast();

Copier après la connexion

Arrière-plan - Cela nous permet d'ajouter des effets visuels aux éléments HTML en arrière-plan.

Box-shadow - Cela nous permet d'ajouter une ombre aux éléments HTML.

Transform - Cette propriété nous permet d'ajouter une transformation 2D ou 3D à l'élément. Il vous permet de transformer, faire pivoter, redimensionner, déplacer, incliner, etc. des éléments.

Exemple

<!DOCTYPE html>
<html>
<head>
   <title> Shooting Star Animation Effect </title>
   <style>
      *{
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }
      body{
         overflow: hidden;
      }
      div{
         position: absolute;
         top: 0;
         left: 0;
         background: #000;
         background-position-x: center;
         background-size: cover;
         width: 100%;
         height: 100vh;
         animation: background 68s linear infinite;
      }
      @keyframes background {
         0%{ transform:scale(1);}
         55%{ transform:scale(1.3);}
         100%{ transform: scale(1);}
      }
      span{
         position: absolute;
         left: 50%;
         top: 45%;
         width: 5px;
         height: 5px;
         background: white;
         border-radius: 50%;
         box-shadow: 0 1px 0 5px rgba(254, 254, 255, 0.2), 0 1px 0 7px rgba(245, 254, 255, 0.1), 0 1px 21px rgba(253, 253, 245, 1) ;
         animation: anim 3s ease-in-out infinite;
      }
      span::before{
         content: '';
         width: 290px;
         height: 2px;
         position: absolute;
         top: 53%;
         transform: translateY(-45%);
         background: linear-gradient(90deg, rgba(255, 255, 255, 1), transparent);
      }
      @keyframes anim {
         0%{ transform: rotate(325deg) translateX(0); opacity: 1; }
         40%{ opacity: 0.8; }
         70%{ opacity: 1; }
         100%{ transform: rotate(325deg) translateX(-1400px); opacity: 0; }
      }
      span:nth-child(1){
         top: 0;
         right: 0;
         left: inherit;
         animation-delay: 0 ;
         animation-duration: 1s;
      }
      span:nth-child(2){
         top: 0;
         right: 70px;
         left: inherit;
         animation-delay: 0.3s;
         animation-duration: 4s;
      }
      span:nth-child(3){
         top: 70px;
         right: 0px;
         left: inherit;
         animation-delay: 0.3s ;
         animation-duration: 3s;
      }
      span:nth-child(4){
         top: 0;
         right: 170px;
         left: initial;
         animation-delay: 0.7s;
         animation-duration: 3s;
      }
   </style>
</head>
<body>
   <div>
      <span> </span>
      <span> </span>
      <span> </span>
      <span> </span>
      <span> </span>
      <span> </span>
   </div>
</body>
</html>

Copier après la connexion

Conclusion

Dans cet article, nous avons appris à créer un effet d'étoile filante en utilisant CSS. Depuis que la conception Web s’est considérablement améliorée, l’animation en ligne est un outil important que les créateurs de sites Web utilisent pour attirer un public plus large. La plupart des gens essaient de l'utiliser plus souvent, non seulement pour remplir la page, mais aussi pour montrer comment la page doit être lue. Les animations sont utilisées pour afficher les erreurs de formulaire, les emplacements des clics, augmenter les taux de conversion, etc.

Les animations attirent souvent l'attention de l'utilisateur, c'est pourquoi elles sont utilisées. De plus, les animations peuvent être utilisées pour détourner l’attention des utilisateurs pendant le chargement du contenu, donnant l’impression qu’il se charge plus rapidement et leur permettant d’observer immédiatement le mouvement ou la progression.

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!