Fortgeschrittene CSS-Techniken

Kursinhalt

Fortgeschrittene CSS-Techniken

Fortgeschrittene CSS-Techniken

1. Einführung

Kursübersicht Kursfokus Kursthemen Wie Man Erfolgreich Ist

2. Elementpositionierung

Was Ist Positionierung?Relative Positionierung Herausforderung: Relative Positionierung Absolute Positionierung Herausforderung: Absolute Positionierung Feste Positionierung Herausforderung: Feste Positionierung Sticky-Positionierung Herausforderung: Sticky Positionierung Stapelreihenfolge Herausforderung: Stapelreihenfolge Inhaltsüberlauf

3. Übergänge

Was Ist Eine Transition?Übergangseigenschaft Auswählen Übergangsdauer Übergangszeit Funktion Übergangszeitverzögerung Übergangskombination Herausforderung: Übergang Hinzufügen

4. Animationen

Was Ist Animation?Festlegen der Animationszeit Steuerung der Animationswiedergabemenge und -Richtung Verwaltung des Animationszustands Animationskomposition Herausforderung: Animation Hinzufügen

5. Transformationen

Was Ist Transformation?Skalierung Rotieren Herausforderung: Skalierung und Drehung Hinzufügen Übersetzen Schrägstellung Perspektive Herausforderung: Hinzufügen von Übersetzungen und Schrägstellungen

6. Adaptive/Responsive Websites und Apps

Was Ist Adaptives/Responsives Design?@media-Abfrage Adaptive - Responsive Layouts Untersuchen der Webseite Herausforderung: Überprüfung des Adaptiven/Responsiven Layouts

7. Präprozessoren

Was Ist Ein Präprozessor?Sass Syntax Sass Variables Sass Numerische Operatoren Sass-Verschachtelung @extend-Direktive Ordner-Datei-Struktur

Übergangsdauer

Wir verwenden die Eigenschaft transition-duration, um die Zeit anzugeben, während der die Transition stattfinden soll. Diese Eigenschaft wird in Sekunden (z.B. 3s oder 0.45s) oder Millisekunden (z.B. 3000ms oder 450ms) ausgedrückt. Wenn die Dauer einer Transition nicht explizit definiert ist, erfolgt die Änderung sofort.

transition-duration: 3s | 3000ms;

Lassen Sie uns das folgende Beispiel ausführen, um zu sehen, welche Verhaltensweisen wir erhalten können. Bitte fahren Sie mit der Maus über das Container-Element, und die Transition wird für alle Elemente gestartet. Der Unterschied liegt in der Dauer der Transition.

index.html

index.css

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 3

Fragen Sie AI

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Kursinhalt

Fortgeschrittene CSS-Techniken

Fortgeschrittene CSS-Techniken

1. Einführung

Kursübersicht Kursfokus Kursthemen Wie Man Erfolgreich Ist

2. Elementpositionierung

Was Ist Positionierung?Relative Positionierung Herausforderung: Relative Positionierung Absolute Positionierung Herausforderung: Absolute Positionierung Feste Positionierung Herausforderung: Feste Positionierung Sticky-Positionierung Herausforderung: Sticky Positionierung Stapelreihenfolge Herausforderung: Stapelreihenfolge Inhaltsüberlauf

3. Übergänge

Was Ist Eine Transition?Übergangseigenschaft Auswählen Übergangsdauer Übergangszeit Funktion Übergangszeitverzögerung Übergangskombination Herausforderung: Übergang Hinzufügen

4. Animationen

Was Ist Animation?Festlegen der Animationszeit Steuerung der Animationswiedergabemenge und -Richtung Verwaltung des Animationszustands Animationskomposition Herausforderung: Animation Hinzufügen

5. Transformationen

Was Ist Transformation?Skalierung Rotieren Herausforderung: Skalierung und Drehung Hinzufügen Übersetzen Schrägstellung Perspektive Herausforderung: Hinzufügen von Übersetzungen und Schrägstellungen

6. Adaptive/Responsive Websites und Apps

Was Ist Adaptives/Responsives Design?@media-Abfrage Adaptive - Responsive Layouts Untersuchen der Webseite Herausforderung: Überprüfung des Adaptiven/Responsiven Layouts

7. Präprozessoren

Was Ist Ein Präprozessor?Sass Syntax Sass Variables Sass Numerische Operatoren Sass-Verschachtelung @extend-Direktive Ordner-Datei-Struktur

Übergangsdauer

Wir verwenden die Eigenschaft transition-duration, um die Zeit anzugeben, während der die Transition stattfinden soll. Diese Eigenschaft wird in Sekunden (z.B. 3s oder 0.45s) oder Millisekunden (z.B. 3000ms oder 450ms) ausgedrückt. Wenn die Dauer einer Transition nicht explizit definiert ist, erfolgt die Änderung sofort.

transition-duration: 3s | 3000ms;

Lassen Sie uns das folgende Beispiel ausführen, um zu sehen, welche Verhaltensweisen wir erhalten können. Bitte fahren Sie mit der Maus über das Container-Element, und die Transition wird für alle Elemente gestartet. Der Unterschied liegt in der Dauer der Transition.

index.html

index.css

War alles klar?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 3

some-alt