Pure CSS3 crée des effets spéciaux d'animation cloud multicouches réalistes

Bref tutoriel

Il s'agit d'un effet spécial d'animation cloud multicouche réaliste CSS3 pur très cool. Cet effet spécial utilise plusieurs images PNG de nuages ​​transparents comme images d'arrière-plan et utilise l'animation CSS pour créer l'effet d'animation flottant horizontal des nuages.

Afficher le code source Télécharger le plug-in

　Comment l'utiliser

　Structure HTML

La structure HTML de l'effet d'animation cloud multicouche est très simple : utilisez un p.sky comme couche d'arrière-plan de l'antenne et placez plusieurs sous-titres à l'intérieur

En tant que conteneur cloud.

<p class="sky">
    <p class="clouds_one"></p>
    <p class="clouds_two"></p>
    <p class="clouds_three"></p>
</p>

Style CSS

Comme arrière-plan du ciel, l'élément .sky définit une hauteur fixe, utilise le positionnement relatif et utilise overflow: Hidden pour se cacher ; au-delà des éléments de portée. Commencez par définir la couleur du ciel sur un bleu plus clair #007fd5. Ensuite, une animation CSS3 sky_background est définie pour l'arrière-plan du ciel. Cette animation fait passer la couleur de l'arrière-plan du ciel du bleu clair au bleu foncé en 50 secondes. La fonction de synchronisation de l'animation est facile et l'itération de l'animation est simplifiée. animation Le nombre de fois où animation-iteration-count est une boucle infinie.

Dans cet effet spécial, chaque élément est défini avec l'attribut transform : translate3d(0, 0, 0) Cet attribut est utilisé. pour activer l'effet 3D du GPU et améliorer les performances d'affichage.

.sky {
    height: 480px;
    background: #007fd5;
    position: relative;
    overflow: hidden;
    -webkit-animation: sky_background 50s ease-out infinite;
    -moz-animation: sky_background 50s ease-out infinite;
    -o-animation: sky_background 50s ease-out infinite;
    animation: sky_background 50s ease-out infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  @keyframes sky_background {
    0% {
      background: #007fd5;
      color: #007fd5
    }
    50% {
      background: #000;
      color: #a3d9ff
    }
    100% {
      background: #007fd5;
      color: #007fd5
    }
  }

La couche cloud 1 utilise la première image PNG du cloud comme Image d'arrière-plan, utilisant un positionnement absolu, alignée à gauche par rapport au conteneur Sky. La hauteur est égale au ciel et la largeur est 3 fois le conteneur ciel. et effectuez une animation CSS3 cloud_one. Cette animation modifie la propriété gauche du calque nuageux afin que les nuages ​​se déplacent horizontalement.

.clouds_one {
    background: url("img/cloud_one.png");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_one 50s linear infinite;
    -moz-animation: cloud_one 50s linear infinite;
    -o-animation: cloud_one 50s linear infinite;
    animation: cloud_one 50s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  @keyframes cloud_one {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }

Les animations CSS3 de Cloud 2 et Cloud 3 sont fondamentalement similaires à celles de Cloud 1, sauf que la durée de l'animation est différent, la durée du nuage 1 est de 50 secondes, la durée du nuage 2 est de 75 secondes et la durée du nuage 3 est de 100 secondes. De cette façon, le temps d'animation de chaque couche nuageuse est différent et certains effets visuels d'arrière-plan seront obtenus.

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!