Завдання: Застосування Масштабування та Обертання
Завдання
Створити привабливу картку онлайн-магазину електроніки, де кожна картка містить зображення, назву та ціну. Необхідно підвищити візуальну привабливість, додавши такі анімації:
- Масштабування зображення: Використати правило ключових кадрів
increaseImageSize
для додавання ефекту масштабування до елемента зображення, збільшуючи його на 20%. Кінцевий результат має бутиscale(1.2)
. - Обертання ціни: Реалізувати правило ключових кадрів
rotatePrice
для додавання ефекту обертання до елемента ціни, здійснюючи повний оберт. Кінцевий результат має бутиrotate(360deg)
.
Використовувати заздалегідь визначені правила ключових кадрів.
index.html
index.css
- Для анімації масштабування:
- На початку (0%), використовуйте
scale(1)
для збереження початкового розміру; - На середині (50%), збільшіть розмір до
scale(1.1)
; - В кінці (100%), збільшіть розмір до
scale(1.2)
.
- На початку (0%), використовуйте
- Для анімації обертання:
- На початку (0%), залиште кут обертання
rotate(0deg)
; - На середині (50%), оберніть на половину до
rotate(180deg)
; - В кінці (100%), завершіть обертання до
rotate(360deg)
.
- На початку (0%), залиште кут обертання
index.html
index.css
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
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
Завдання: Застосування Масштабування та Обертання
Свайпніть щоб показати меню
Завдання
Створити привабливу картку онлайн-магазину електроніки, де кожна картка містить зображення, назву та ціну. Необхідно підвищити візуальну привабливість, додавши такі анімації:
- Масштабування зображення: Використати правило ключових кадрів
increaseImageSize
для додавання ефекту масштабування до елемента зображення, збільшуючи його на 20%. Кінцевий результат має бутиscale(1.2)
. - Обертання ціни: Реалізувати правило ключових кадрів
rotatePrice
для додавання ефекту обертання до елемента ціни, здійснюючи повний оберт. Кінцевий результат має бутиrotate(360deg)
.
Використовувати заздалегідь визначені правила ключових кадрів.
index.html
index.css
- Для анімації масштабування:
- На початку (0%), використовуйте
scale(1)
для збереження початкового розміру; - На середині (50%), збільшіть розмір до
scale(1.1)
; - В кінці (100%), збільшіть розмір до
scale(1.2)
.
- На початку (0%), використовуйте
- Для анімації обертання:
- На початку (0%), залиште кут обертання
rotate(0deg)
; - На середині (50%), оберніть на половину до
rotate(180deg)
; - В кінці (100%), завершіть обертання до
rotate(360deg)
.
- На початку (0%), залиште кут обертання
index.html
index.css
Дякуємо за ваш відгук!