Tâche

Créez une carte de boutique en ligne attrayante pour l'électronique, où chaque carte comprend une image, un nom et un prix. La tâche consiste à améliorer l'attrait visuel en incorporant les animations suivantes :

1. Image à l'échelle : Utilisez la règle de keyframes increaseImageSize pour ajouter un effet de mise à l'échelle à l' élément image , le rendant 20% plus grand. Le résultat final devrait être scale(1.2) .

2. Rotation du prix : Implémentez la règle de keyframes rotatePrice pour ajouter un effet de rotation à l' élément prix , complétant un tour complet. Le résultat final devrait être rotate(360deg) .

Utilisez les règles de keyframes prédéfinies.

1. Pour l'animation de mise à l'échelle :

   • Au début (point 0%), utilisez scale(1) pour maintenir la taille originale ;

   • Au milieu (point 50%), augmentez la taille à scale(1.1) ;

   • À la fin (point 100%), augmentez la taille à scale(1.2) .

2. Pour l'animation de rotation :

   • Au début (point 0%), gardez l'angle de rotation à rotate(0deg) ;

   • Au milieu (point 50%), faites une rotation à mi-chemin à rotate(180deg) ;

   • À la fin (point 100%), complétez la rotation avec rotate(360deg) .