Kursinhalt
Fortgeschrittene CSS-Techniken
Fortgeschrittene CSS-Techniken
Herausforderung: Skalierung und Drehung Hinzufügen
Aufgabe
Erstellen Sie eine ansprechende Online-Shop-Karte für Elektronik, bei der jede Karte ein Bild, einen Namen und einen Preis enthält. Die Aufgabe besteht darin, die visuelle Attraktivität durch die Integration der folgenden Animationen zu verbessern:
Bild skalieren : Verwenden Sie die
increaseImageSize
Keyframes-Regel, um dem Bildelement einen Skalierungseffekt hinzuzufügen, der es um 20% vergrößert. Das Endergebnis solltescale(1.2)
sein.Preis rotieren : Implementieren Sie die
rotatePrice
Keyframes-Regel, um dem Preiselement einen Rotationseffekt hinzuzufügen, der eine vollständige Drehung abschließt. Das Endergebnis sollterotate(360deg)
sein.
Verwenden Sie die vordefinierten Keyframes-Regeln.
index.html
index.css
Für die Skalierungsanimation:
Am Anfang (0% Punkt), verwenden Sie
scale(1)
, um die Originalgröße beizubehalten;Am Mittelpunkt (50% Punkt), erhöhen Sie die Größe auf
scale(1.1)
;Am Ende (100% Punkt), erhöhen Sie die Größe auf
scale(1.2)
.
Für die Rotationsanimation:
Zu Beginn (0% Punkt), halten Sie den Rotationswinkel bei
rotate(0deg)
;Am Mittelpunkt (50% Punkt), drehen Sie zur Hälfte auf
rotate(180deg)
;Am Ende (100% Punkt), vollenden Sie die Drehung mit
rotate(360deg)
.
index.html
index.css
Danke für Ihr Feedback!