Создание анимации пульсирующего сердца в CSS: два удара и пауза

Быстрый ответ

Чтобы создать анимацию пульсирующего сердца на CSS, используется @keyframes для изменения масштаба элемента в форме сердца:

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(1); }
  75% { transform: scale(1.3); }
}

.heart {
  position: relative;
  width: 100px;
  height: 100px;
  background: red;
  transform: rotate(-45deg);
  animation: pulse 2s infinite ease-in-out;
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%;
}

.heart::before { top: -50px; }
.heart::after { left: 50px; }

Данный код создает ритм с двумя сокращениями, эмулируя сердечный пульс.

Создание сердца на CSS

Формирование формы сердца

Для моделирования фигуры сердца с использованием CSS, используйте псевдоэлементы ::before и ::after. В этом подходе предусматривается создание двух полукругов на квадратной основе. После их вращения и абсолютного позиционирования получается форма сердца.

Подробнее об этом расскажет наш спикер на видео

Пульс любви

Создайте эффект живого пульса сердца с помощью двух сокращений с коротким паузами между ними. Настройте @keyframes для получения желаемого ритма: два быстрых увеличения масштаба на 30%, имитирующих пульсации сердца, с последующим восстановлением исходного размера.

@keyframes heartbeat {
  0%, 20%, 40%, 60%, 80%, 100% { transform: scale(1); }
  10%, 50% { transform: scale(1.3); }
}

Бесконечная любовь

Чтобы сердце не прекращало пульсацию, используйте значение infinite. Это позволит смоделировать бесконечный сердечный ритм, воплощающий искреннюю любовь.

Советы по стилизации пульсации сердца

Мощность любви

Увеличение на 30% при применении transform: scale(1.3); создает эффект пульсации, делая анимацию выразительной, но не нарушая ее гармоничность. Лучше всего начинать и заканчивать анимацию с scale(1) для создания плавных переходов.

Пульсация любви

Настройте пульсацию, играя со временем работы анимации – значение animation-duration. Продолжительность в 2 секунды обычно хорошо работает, но для более текучего движения попробуйте функцию ease-in-out.

Правило центровки

Для максимизации визуального впечатления следует организовать композицию так, чтобы сердце стало главным элементом. Используйте grid, flexbox или другие методы для идеального позиционирования.

Стильность – в простоте

Чистота кода обеспечивает его эффективность. Каждый элемент должен играть свою роль, по возможности улучшая скорость загрузки и производительность вашего кода.

Реактивность на всех экранах

При создании адаптивного дизайна ориентируйтесь на принцип Mobile-First. Для размеров используйте относительные единицы измерения, например, em, и магию медиа-запросов для поддержания ваших стилей на разных экранах.

Визуализация

Визуальное представление сердечного пульса на CSS может выглядеть следующим образом:

@keyframes delicate-pulse {
  0% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
  100% { transform: scale(1); }
}

.heart {
  animation: delicate-pulse 1.5s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

Отточенная анимация для более качественного пульсирования

Изящность главное дело

Уделите внимание тому, чтобы ключевые элементы дизайна или текстовые блоки не затрагивались эффектом пульсации. Мягкая, комплексная работа здесь будет более эффективна и уместна, чем полное доминирование эффекта.

Стабильный пульс во всех браузерах

Обеспечьте совместимость воспроизведения анимации в различных браузерах. Применяйте префиксы поставщиков браузера, увеличивая таким образом обратную совместимость анимации.

Гарантированная производительность

Стремитесь минимизировать нагрузку на производительность, избегая излишне сложных анимаций. Оптимизация отрисовки и устранение потенциальных нарушений вёрстки с помощью эффективного CSS – ваш залог успеха.

Усовершенствование с помощью SVG

Рассмотрите возможность использования SVG-анимации для более сложных эффектов. Элемент <animateTransform> предоставляет больший контроль над анимацией.

Минималистичная альтернатива

Для более простых решений, используйте иконки HTML-шрифтов или символ ♥ в сочетании с изменением размеров шрифта через keyframes. Это служит лаконичной альтернативой сложной CSS-анимации.

Полезные материалы