Tout ce que nous voulons pour Noël, c'est notre CSS ...

Vente de Noël 2012 de SitePoint: une extravagance d'animation CSS

Vous avez probablement vu la vente de Noël 2012 de SitePoint - un pays des merveilles hivernal uniquement sur le bureau avec des éléments animés quotidiens: les patineurs de glace, un ours dansant, le poisson sautant, un train à vapeur, et plus!

Maintenant, nous ajoutons un "mode d'histoire de Noël" pour ceux qui veulent une plongée plus profonde. Visitez https://www.php.cn/link/ce6f311f2548c0e40fbd9beaaa288d32 pour voir l'histoire quotidienne sans la page de vente. Les liens directs vers des jours spécifiques sont disponibles en utilisant "# day /" suivi du numéro de jour (par exemple, https://www.php.cn/link/CE6F311f2548c0e40fbd9beaaa288d32#day/14 pour le jour 14).

derrière la conception

La conception, la mise en page et les illustrations sont de Harley Alexander. Michael Sauter a construit le backend, Ian Coleman a tout intégré et Jude Aakjaer a géré le projet. Les animations sont mon travail. Ce projet a été une excellente occasion d'expérimenter avec les nouvelles techniques d'animation.

Le défi était de créer les animations en utilisant principalement CSS3, minimisant JavaScript. Bien que réussie, une petite quantité de JavaScript a été utilisée pour des effets spécifiques (par exemple, le calcul des positions de bouffée de fumée par rapport à la cheminée du train). Ce javascript agit comme une bascule d'animation, pas le moteur d'animation lui-même.

plonger plus profondément

Pour un regard détaillé sur le CSS, rejoignez notre groupe de podling CSS de Noël. Je vais répondre aux questions et recueillir des commentaires. Je partagerai également des tutoriels d'animation plus détaillés sur SitePoint au cours de la nouvelle année. Profitez des animations quotidiennes et partagez vos pensées!

Les questions fréquemment posées (FAQ) sur la création d'effets de Noël avec CSS

Les questions et réponses suivantes offrent un aperçu de la création de diverses animations et conceptions sur le thème de Noël à l'aide de CSS:

• Effet des chutes de neige: Créer des divs pour les flocons de neige, en utilisant les animations CSS (keyframes) et la propriété transform pour simuler la chute. Variant des tailles et des vitesses pour le réalisme. Utilisez opacity pour un effet de fondu / décoloration.

• Lumières de Noël: Créer des divs pour les lumières, en utilisant animation pour clignoter et background-color pour les changements de couleur. Utilisez border-radius pour les lumières rondes et box-shadow pour une lueur.

• arbre de Noël: Créer des divs pour les branches, en les façonnant en utilisant border et background-color. Utilisez ::before et ::after pseudo-éléments pour des branches et ornements supplémentaires.

• Animation du Père Noël: Créer des divs pour les parties du Père Noël, en utilisant transform pour le mouvement et la rotation, et animation pour le mouvement global. Utilisez border-radius pour la mise en forme.

• Compte à rebours de Noël: nécessite JavaScript pour la logique du compte à rebours; CSS gère le style (taille de police, couleur, alignement).

• Carte de Noël: Créez une div pour la carte, en utilisant border, background-color, box-shadow (pour l'effet 3D), et transform (pour la rotation).

• étoile de Noël: Créez une div, en utilisant border, background-color, transform (pour la rotation), et box-shadow (pour l'éclat).

• Ornement de Noël: Créez un div, en utilisant border-radius, background-color, box-shadow, et transform.

• Banner de Noël: Créez un div, en utilisant width, height, background-color, text-align, et font-size.

• Fiche de Noël: Créer des divs pour les pièces de cheminée, en utilisant border, background-color, box-shadow, et transform.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!