Ich habe ein paar CSS Fingerübungen geschrieben, hier kannst du diese nachmachen und dein CSS Wissen erweitern bzw. abfragen.
Animiertes Burger Menü
Aufgabe: Es soll ein animiertes Burger Menü-Icon erstellt werden. In diesem Beispiel bei einem hover Event ausgelöst werden.
Hamburger Menü Animation Lösung
Wiederholung Menu Animation
Aufgabe: Ein Burger Menu, soll zu einem Pfeil transformieren.
CSS Burger Arrow Menu Lösung
Animiertes Input-Text-Feld mit Validation
Aufgabe: Es soll ein Inputfeld erstellt werden, wenn man drauf klickt, soll das Label nach oben sliden und die Farbe bei der Validierung ändern.
Textinput Animation Lösung
Text mit Verlauf
The quick brown fox jumps over the lazy dog
Aufgabe: Es soll ein Text mit einem Verlauf gefüllt werden.
CSS Verlauf im Text Lösung
Warnsignal Animation
Aufgabe: Animiere ein Farb- Transparent- Verlauf so, dass es wie ein Alarm aussieht.
CSS animieter Alarm Lösung
Kombination aus den letzten beiden Übungen
The quick brown fox jumps over the lazy dog
Aufgabe: Animiere einen Text so, dass es so aussieht, als ob ein Scan durchgeführt wird.
CSS Scan-Text Animation Lösung
SVG Animation
Dem zu animierenden Objekt im SVG eine ID geben und diese mit CSS animieren.
<path id="cat_head" d="M244.4,0l-21.2,12.2l-10.9,6.3c-3.8-1.2-7.8-1.9-12-1.9c-5.3,0-10.3,1-14.8,2.9l-8.3-4.8L156,2.5l3.9,24.1l3.9,23.8
c0.1,18.5,16.4,33.4,36.5,33.4c20.2,0,36.5-15.1,36.5-33.6c0-1-0.1-1.9-0.1-2.9l3.8-23.2L244.4,0z M183,48c-5.3,0-9.5-3.2-9.5-7.1
c0-3.9,4.3-7.1,9.5-7.1s9.5,3.2,9.5,7.1C192.5,44.8,188.3,48,183,48z M216,46.9c-5.3,0-9.5-3.2-9.5-7.1s4.3-7.1,9.5-7.1
s9.5,3.2,9.5,7.1S221.3,46.9,216,46.9z"/>#cat_head{
animation: headbang 2s ease infinite alternate;
}
@keyframes headbang {
0% {
transform: rotate(5deg);
transform-origin: 90% 30%;
}
100% {
transform: rotate(-5deg);
transform-origin: 70% 30%;
}
}CSS Tutorial
Voriger Schritt: CSS: Checkbox styling
Zur Turtorial-Reihe: CSS Tutorial
Nächster Schritt: responsive Navigation mit Burgermenü
