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.