ALBATROS CONCEPT 
Accueil : Contact : Tarifs : Présentation
   Assistance informatique      Développement Web      Formation      Logiciels      Multimedia   
Texte si le navigateur ne supporte pas le HTML Canvas
Pseudo ou Email
Mot de passe
S'inscrire
Mot de passe perdu ? Email non reçu ?
Développeur web expert, PHP5, MySQL5, JavaScript, HTML5, LE MANS METROPÔLE

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.

LES ENVAHISSEURS

Liens directs

Valid CSS :: Valid XHTML
Copyright © 2011 par Albatros Concept
Maquette graphique par: GET CSS TEMPLATES modifiée par Albatros Concept