ALBATROS CONCEPT 
Accueil : Contact : Tarifs : Présentation
   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), mouche se faisant capturer par une Dionee : 2/07/2017

Cette animation montre une mouche (représentée par un cercle plein) voletant jusqu'à une dionée (plante carnivore) qui referme ses feuilles pour capturer la mouche.

C'est une animation CSS3 basique, on peut y ajouter les "piquants" de la dionée autour des 2 feuilles.

Pour cette animation, j'ai utilisée la propriété "overflow" sur un disque créée en feuille de style (Donnant un disque incomplet). Pour la mouche, je l'ai initialisée positionnée sur le div représentant la feuille du bas, que j'ai décallée en hauteur, largeur et profondeur (qui représente la hauteur visible ici). Une autre difficulté a été de faire disparaitre la mouche quand la 2ème feuille s'abat sur la mouche et la rendre invisible. J'étais parti sur la propriété "visibility", mais en fait, vu que les 2 feuilles et la mouche sont inclus dans le même div, j'ai juste agit sur les "z-index" de chacun et ça marche! Enfin, un peu de trigonométrie pour calculer la position et la longueur du trait simulant la jointure entre les 2 feuilles (en vert foncé).

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