Exemple de démo d'animation CSS3 (feuilles de style en cascade HTML5), générique de la série "Les envahisseurs" : 9/07/2017

Qui ne se souvient pas de cette série mythique où le générique montrait au tout début, des halos de lampes torches sur le titre "les envahisseurs" ?.

C'est ce que montre cette animation de 10s. La grande difficulté ici a été de créer en CSS ce halo de lumière (une ellipse) en transparence entourée de noir et s'agrandissant! La seule méthode possible a été d'utiliser la propriété "image-background" en créant un dégradé "radial-gradiant" dont la couleur est fixe jusqu'à 50% et à 50%, passage au noir. Ensuite, pour agrandir ce halo, la seule possibilité a été d'utiliser la méthode "scale" (la propriété "background-image" ne fonctionnant pas avec les animations CSS3!). Et pour éviter les recalculs, on positionne le "transform-origin:" aux même coordonnées que le centre de l'ellipse (le transform-origin par défaut étant au centre de l'image).

2 mots sur la propriété radial-gradiant. Le meilleur choix pour les paramètres, à mon sens, dans cette démo, a été de la forme radial-gradiant(largeur hauteur at x_centre, y_centre, couleur1_transparente_a_0_2 0%, couleur1_transparente_a_0_2 50%, black 50%), où largeur et hauteur sont la largeur et hauteur DES RAYONS de l'ellipse en px, x_centre et y_centre les coordonnées du centre de l'ellipse. Si on met largeur à 200, la largeur de l'ellipse sera de 400 mais en mettant la couleur intermédiaire de l'ellipse à 50%, on verra un rayon apparant de 100.

Vous pouvez utiliser le code source (en affichant le source de la page et utilisant le fichier CSS.