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), pâquerette qui frémit au vent : 4/07/2017

Une pâquerette qui subit un coup de vent, frémit, et dont les pétales font des oscillations.

Il y a le coeur de la fleur (créée par une feuille de style : un cadre rempli en orange et avec un border-radius de rayon la moitié du côté du cadre) dont les 24 pétales héritent des propriétés. Ces pétales font une oscillation le long de l'axe des Y situé à gauche de chaque pétale. Pour le positionnement des pétales autour du coeur, il a fallu encore faire de la trigonométrie avec les positionnements en cosinus et sinus, mais aussi modifier la base de la rotation, qui est en 0px (top) et 30px (milieu du côté gauche). Il y a 24 div consacrés aux pétales! Il est certains que programmer tout cela en JavaScript réduirait considérablement la longueur de texte (et les erreurs).

Vous pouvez utiliser le code source (en affichant le source de la page et utilisant le fichier CSS). J'ai conçu cette animation à partir de la possibilité de faire de la 3D avec des cadres en CSS3.

Liens directs

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