Условие
В style.css сделайте так, чтобы квадрат .box плавно «дышал»: сначала обычный размер (1), потом чуть крупнее (1.2 — это те же 100% плюс ещё 20%), затем снова к обычному — и так по кругу без остановки. Ориентир — вкладка «Результат».
Что нужно сделать
- Опишите анимацию с именем
pulse: два кадра — размер 1 и размер 1.2. - Подключите эту анимацию к квадрату
.box(около 1 секунды, плавно). - Сделайте движение бесконечным и туда-обратно (увеличился → уменьшился → снова…).
Подсказка для новичка
Сначала кадры анимации, потом подключение к .box — имя в обоих местах одно и то же. Число 1 — «как есть», 1.2 — на пятую часть крупнее. Подробнее — в «Дополнительной информации».
Стартовый код
Допишите решение в редакторе слева, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка «Помощник» подставит решение по шагам.
Вот так должно получиться
Квадрат плавно пульсирует
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- документ HTML5.<html lang="ru">- корень страницы;lang="ru"- язык русский.<head>- служебная часть: кодировка,<title>, подключение CSS.<meta charset="UTF-8" />- кодировка текста.<link rel="stylesheet" href="style.css" />- подключениеstyle.css.<body>- видимое содержимое; внутри - квадрат.box.<div class="box">- оранжевый квадрат для анимации.body- селектор тега: стили для всей страницы (margin,background)..box- селектор класса квадрата (width,height,background, сюда же -animation).@keyframes- кадры анимации; имяpulseпотом указывают вanimation.from/to- начальный и конечный кадр (то же, что0%/100%).animation- подключить анимацию к элементу (имя, длительность, плавность, повторы).ease-in-out/infinite/alternate- плавность, бесконечный повтор, туда-обратно.
Слева два файла: style.css (здесь решаете задание) и index.html (готовая разметка, менять не нужно). Ниже - разбор подробнее: всё, что есть на странице.
Файл style.css - что уже написано
В стартовом
style.css
два блока-правила:
body { ... }
и
.box { ... }.
Вам нужно добавить
@keyframes pulse
и свойство
animation
у
.box.
Правило body
-
margin: 24px- внешний отступ со всех сторон страницы 24 пикселя (квадрат не прилипает к краю). -
background: #f8fafc- цвет фона страницы (светло-серый в формате HEX).
Правило .box
-
width: 80px- ширина квадрата 80 пикселей. -
height: 80px- высота 80 пикселей (равна ширине → квадрат). -
background: #f59e0b- заливка оранжевым цветом (HEX). -
Сюда же добавляют свойство
animation- подключить анимациюpulseк квадрату (имя, длительность ≈ 1s, плавность, бесконечный повтор туда-обратно).
Что такое @keyframes
@keyframes
описывает кадры анимации: как элемент выглядит в начале и в конце.
Имя после
@keyframes
(здесь
pulse
) потом указывают в свойстве
animation.
Без
@keyframes
браузер не знает, что менять; без
animation
- не знает, к какому элементу применить.
-
@keyframes pulse- объявление анимации с именемpulse. -
from/to- начальный и конечный кадр (то же, что0%/100%). В кадрах задают размер квадрата: в начале — обычный, в конце — чуть крупнее.
Какие числа размера ставить в кадрах
Размер удобно думать как множитель:
1 — «как есть» (100%),
1.2 — на 20% крупнее (100% + 20% = 120%).
В кадре
from
— обычный размер (1), в
to
— увеличенный (1.2). Как именно записать это в CSS — подумайте сами или загляните в «Помощник».
Свойство animation - из чего складывается
-
Имя
- то же, что после
@keyframes(pulse). -
Длительность
- около
1s(один цикл ≈ секунда). -
ease-in-out- плавный старт и финиш (не резко). -
infinite- повторять без конца. -
alternate- чередовать направление: после «увеличился» идёт обратно кfrom- получается пульсация, а не рывок только в одну сторону.
Коротко: сначала кадры
@keyframes pulse
(размер 1 → размер 1.2), потом
animation
на
.box
с длительностью, плавностью,
infinite
и
alternate.
Сверьте вид с вкладкой
«Результат».