Blog iamvdo.mePlusieurs animations sont utiles ici. Aucune image n’est utilisée. Les flocons sont crées à l’aide de @font-face.
Pour chaque flocon, le positionnement est effectué avec position:absolute et la propriété left, à l’extérieur de la carte de voeux. Ensuite 3 animations se chargent de faire varier margin-left, rotation et margin-top, afin de faire "tomber" les flocons. Le temps de chaque animation est différent pour chaque flocon.
Pour plus d’infos, voir le code source.
L’animation marche avec le moteur Webkit, soit Safari et Chrome.
Votez pour la démo si elle vous plaît.
#1par Anas, le 20 mars 2011
Merci beaucoup pour ces informations brèves, explicites et précises.
#2par Dimi, le 21 octobre 2011
Cool !
Est-ce dû à mon navigateur (Chrome) que ça saccade autant ?
#3par Daphné, le 1er décembre 2011
Super le tutoriel ! je l’ai essayé et ça marche sur chrome ! le seul hic, c’est l’affichage des flocons ! chez moi je vois à l’écran A A A. comment faire le @font-face pour afficher des flocons ?merci :)
#4par css3create, le 2 décembre 2011
@Daphné : Je ne sais pas pourquoi ça ne fonctionne pas mais effectivement c’est pas terrible. Le mieux serait de gérer une image de flocon plutôt qu’une lettre de police symbole. J’ai voulu jouer la carte du "fait 100% sans images"...
#5par Daphné, le 2 décembre 2011
Super ! merci pour la réponse. Allez go pour une image de flocon :D
Joyeuses fêtes et bonne continuation sur le site ...
#6par Anonyme, le 20 janvier 2013
j’adore ce site. tuto très explicite !