Alles, was wir zu Weihnachten wollen, ist unser CSS ...

sitepoint 2012 Weihnachtsverkauf: A CSS -Animation Extravaganza

Sie haben wahrscheinlich den Weihnachtsverkauf von Sitepoint 2012 gesehen-ein nur Winterwunderland mit Desktop-Desktops mit täglichen animierten Elementen: ICE Skater, einen tanzenden Bären, springenden Fisch, einen Dampfzug und mehr!

Jetzt fügen wir einen "Weihnachtsgeschichtenmodus" für diejenigen hinzu, die einen tieferen Tauchgang wollen. Besuchen Sie https://www.php.cn/link/ce6f311f2548c0e40fbd9beaaa288d32 , um die tägliche Geschichte ohne die Verkaufsseite anzuzeigen. Direkte Links zu bestimmten Tagen sind mit "#Day/" verfügbar, gefolgt von der Tagesnummer (z. B. https://www.php.cn/link/ce6f311f2548c0e40fbd9beaaa288d32#day/14 für Tag 14). 🎜>

hinter dem Design

Das Design, das Layout und die Illustrationen stammen von Harley Alexander. Michael Sauter baute das Backend, Ian Coleman integrierte alles und Jude Aakjaer leitete das Projekt. Die Animationen sind meine Arbeit. Dieses Projekt war eine großartige Gelegenheit, mit neuen Animationstechniken zu experimentieren.

Die Herausforderung bestand darin, die Animationen hauptsächlich mit CSS3 zu erstellen, wodurch JavaScript minimiert wird. Während meist erfolgreich war, wurde eine kleine Menge JavaScript für spezifische Effekte verwendet (z. B. Berechnung von Rauchpuffpositionen im Vergleich zum Zug des Zuges). Dieses JavaScript fungiert als Animationsumschaltung, nicht als Animations -Engine selbst.

tauchen tiefer

Für einen detaillierten Blick auf die CSS treten Sie in unserer Weihnachts -CSS -Podling -Gruppe bei. Ich werde Fragen beantworten und Feedback sammeln. Ich werde im neuen Jahr auch detailliertere Animations -Tutorials auf SitePoint teilen. Genießen Sie die täglichen Animationen und teilen Sie Ihre Gedanken!

häufig gestellte Fragen (FAQs) zum Erstellen von Weihnachtseffekten mit CSS

Die folgenden Fragen und Antworten bieten Einblicke in die Erstellung verschiedener Animationen und Designs mit Weihnachtsmotiven mit CSS:

• Schneefall -Effekt: DIVs für Schneeflocken erstellen mit CSS -Animationen () und der keyframes Eigenschaft, um das Sturz zu simulieren. Variieren Sie Größen und Geschwindigkeiten für Realismus. Verwenden Sie transform für einen Fade-in/Fade-Out-Effekt. opacity

• Weihnachtslichter: Erstellen Sie Divs für Lichter, verwenden Sie zum Blinken und animation für Farbwechsel. Verwenden Sie background-color für runde Lichter und border-radius für einen Glanz. box-shadow

• Weihnachtsbaum: Erstellen Sie Divs für Zweige und formen Sie sie mit und border. Verwenden Sie background-color und ::before Pseudo-Elemente für zusätzliche Zweige und Ornamente. ::after

• Santa Claus Animation: Erstellen Sie Divs für die Teile des Weihnachtsmanns, verwenden Sie transform für Bewegung und Rotation und animation für die Gesamtbewegung. Verwenden Sie border-radius für die Formung.

• Weihnachten Countdown: erfordert JavaScript für die Countdown -Logik; CSS verarbeitet das Styling (Schriftgröße, Farbe, Ausrichtung).

• Weihnachtskarte: Erstellen Sie eine DIV für die Karte mit border, background-color, box-shadow (für 3D -Effekt) und transform (für die Rotation).

• Weihnachtsstern: Erstellen Sie ein Div mit border, background-color, transform (für die Rotation) und box-shadow (für Glühen).

• Weihnachtsverzierung: Erstellen Sie ein Div mit border-radius, background-color, box-shadow und transform.

• Weihnachtsbanner: Erstellen Sie eine DIV unter Verwendung width, height, background-color, text-align und font-size.

• Weihnachtskamin: Erstellen Sie Divs für Kamin -Teile unter Verwendung border, background-color, box-shadow und transform.

Das obige ist der detaillierte Inhalt vonAlles, was wir zu Weihnachten wollen, ist unser CSS .... Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!