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:

1. Bild skalieren: Verwenden Sie die increaseImageSize Keyframes-Regel, um dem Bildelement einen Skalierungseffekt hinzuzufügen, der es um 20% vergrößert. Das Endergebnis sollte scale(1.2) sein.

2. Preis rotieren: Implementieren Sie die rotatePrice Keyframes-Regel, um dem Preiselement einen Rotationseffekt hinzuzufügen, der eine vollständige Drehung abschließt. Das Endergebnis sollte rotate(360deg) sein.

Verwenden Sie die vordefinierten Keyframes-Regeln.

1. 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).

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).