Défi : Appliquer la Mise à l'Échelle et la Rotation
Tâche
Créer une carte de boutique en ligne attrayante pour des produits électroniques, où chaque carte comprend une image, un nom et un prix. L'objectif est d'améliorer l'aspect visuel en intégrant les animations suivantes :
- Agrandissement de l'image : Utiliser la règle de keyframes
increaseImageSize
pour ajouter un effet d'agrandissement à l’élément image, le rendant 20% plus grand. Le résultat final doit êtrescale(1.2)
. - Rotation du prix : Mettre en œuvre la règle de keyframes
rotatePrice
pour ajouter un effet de rotation à l’élément prix, effectuant un tour complet. Le résultat final doit êtrerotate(360deg)
.
Utiliser les règles de keyframes prédéfinies.
index.html
index.css
- Pour l'animation de mise à l'échelle :
- Au début (position 0 %), utiliser
scale(1)
pour conserver la taille d'origine ; - Au milieu (position 50 %), augmenter la taille à
scale(1.1)
; - À la fin (position 100 %), augmenter la taille à
scale(1.2)
.
- Au début (position 0 %), utiliser
- Pour l'animation de rotation :
- Au début (position 0 %), maintenir l'angle de rotation à
rotate(0deg)
; - Au milieu (position 50 %), effectuer une rotation intermédiaire à
rotate(180deg)
; - À la fin (position 100 %), compléter la rotation avec
rotate(360deg)
.
- Au début (position 0 %), maintenir l'angle de rotation à
index.html
index.css
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.04
Défi : Appliquer la Mise à l'Échelle et la Rotation
Glissez pour afficher le menu
Tâche
Créer une carte de boutique en ligne attrayante pour des produits électroniques, où chaque carte comprend une image, un nom et un prix. L'objectif est d'améliorer l'aspect visuel en intégrant les animations suivantes :
- Agrandissement de l'image : Utiliser la règle de keyframes
increaseImageSize
pour ajouter un effet d'agrandissement à l’élément image, le rendant 20% plus grand. Le résultat final doit êtrescale(1.2)
. - Rotation du prix : Mettre en œuvre la règle de keyframes
rotatePrice
pour ajouter un effet de rotation à l’élément prix, effectuant un tour complet. Le résultat final doit êtrerotate(360deg)
.
Utiliser les règles de keyframes prédéfinies.
index.html
index.css
- Pour l'animation de mise à l'échelle :
- Au début (position 0 %), utiliser
scale(1)
pour conserver la taille d'origine ; - Au milieu (position 50 %), augmenter la taille à
scale(1.1)
; - À la fin (position 100 %), augmenter la taille à
scale(1.2)
.
- Au début (position 0 %), utiliser
- Pour l'animation de rotation :
- Au début (position 0 %), maintenir l'angle de rotation à
rotate(0deg)
; - Au milieu (position 50 %), effectuer une rotation intermédiaire à
rotate(180deg)
; - À la fin (position 100 %), compléter la rotation avec
rotate(360deg)
.
- Au début (position 0 %), maintenir l'angle de rotation à
index.html
index.css
Merci pour vos commentaires !