Herausforderung: Skalierung und Rotation Anwenden
Aufgabe
Erstellen Sie eine ansprechende Online-Shop-Karte für Elektronikartikel, bei der jede Karte ein Bild, einen Namen und einen Preis enthält. Ziel ist es, die visuelle Attraktivität durch folgende Animationen zu steigern:
- Bild skalieren: Verwenden Sie die Keyframes-Regel
increaseImageSize
, um dem Bildelement einen Skalierungseffekt hinzuzufügen, sodass es um 20 % vergrößert wird. Das Endergebnis solltescale(1.2)
sein. - Preis rotieren: Implementieren Sie die Keyframes-Regel
rotatePrice
, um dem Preiselement einen Rotationseffekt hinzuzufügen, sodass eine vollständige Drehung erfolgt. Das Endergebnis sollterotate(360deg)
sein.
Verwenden Sie die vordefinierten Keyframes-Regeln.
index.html
index.css
- Für die Skalierungsanimation:
- Zu Beginn (0%-Punkt) mit
scale(1)
die Originalgröße beibehalten; - Am Mittelpunkt (50%-Punkt) die Größe auf
scale(1.1)
erhöhen; - Am Ende (100%-Punkt) die Größe auf
scale(1.2)
erhöhen.
- Zu Beginn (0%-Punkt) mit
- Für die Rotationsanimation:
- Am Anfang (0%-Punkt) den Rotationswinkel auf
rotate(0deg)
belassen; - Am Mittelpunkt (50%-Punkt) zur Hälfte auf
rotate(180deg)
drehen; - Am Ende (100%-Punkt) die Drehung mit
rotate(360deg)
vollenden.
- Am Anfang (0%-Punkt) den Rotationswinkel auf
index.html
index.css
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you show me the CSS code for the card with the animations?
How do I apply the scaling and rotation animations to the correct elements?
Can you provide a complete example of the online shop card with these effects?
Awesome!
Completion rate improved to 2.04
Herausforderung: Skalierung und Rotation Anwenden
Swipe um das Menü anzuzeigen
Aufgabe
Erstellen Sie eine ansprechende Online-Shop-Karte für Elektronikartikel, bei der jede Karte ein Bild, einen Namen und einen Preis enthält. Ziel ist es, die visuelle Attraktivität durch folgende Animationen zu steigern:
- Bild skalieren: Verwenden Sie die Keyframes-Regel
increaseImageSize
, um dem Bildelement einen Skalierungseffekt hinzuzufügen, sodass es um 20 % vergrößert wird. Das Endergebnis solltescale(1.2)
sein. - Preis rotieren: Implementieren Sie die Keyframes-Regel
rotatePrice
, um dem Preiselement einen Rotationseffekt hinzuzufügen, sodass eine vollständige Drehung erfolgt. Das Endergebnis sollterotate(360deg)
sein.
Verwenden Sie die vordefinierten Keyframes-Regeln.
index.html
index.css
- Für die Skalierungsanimation:
- Zu Beginn (0%-Punkt) mit
scale(1)
die Originalgröße beibehalten; - Am Mittelpunkt (50%-Punkt) die Größe auf
scale(1.1)
erhöhen; - Am Ende (100%-Punkt) die Größe auf
scale(1.2)
erhöhen.
- Zu Beginn (0%-Punkt) mit
- Für die Rotationsanimation:
- Am Anfang (0%-Punkt) den Rotationswinkel auf
rotate(0deg)
belassen; - Am Mittelpunkt (50%-Punkt) zur Hälfte auf
rotate(180deg)
drehen; - Am Ende (100%-Punkt) die Drehung mit
rotate(360deg)
vollenden.
- Am Anfang (0%-Punkt) den Rotationswinkel auf
index.html
index.css
Danke für Ihr Feedback!