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), jeu tétris démo : 8/07/2017

Qui ne connait pas le célèbre jeu de tétris ? Cette animation de 20s entièrement en CSS3 montre un exemple de ce qu'il est possible de faire en CSS. Vous avez ici 2 "briques" (la longue jaune et une en forme de L inversée de couleur cyan) qui défile à la suite.

Pour la 2ème brique, le fait d'effectuer une rotation en CSS modifie le sens du dégradé et des bords des carrés! On pourrait complexifier la chose en faisant disparaitre le div de cet objet à ce moment là et en faire apparaitre un autre de la même brique au même endroit mais tournée de 90 degré... Mais en JavaScript on peut aussi résoudre ça en changeant le contenu du div ayant cette brique.

Dans l'entête de feuille de style pour la partie animation, on a mis le paramètre steps à 1 car on ne souhaite qu'une image par étape de l'animation (décomposée dans les keyframes).

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

Liens directs

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