My heart will beat on! Сердце на CSS для неисправимых романтиков

Бьющееся сердце на CSS ко Дню святого Валентина или просто без повода. Простая открытка с глубоким смыслом на чистых и незамутненных стилях.

My heart will beat on! Сердце на CSS для неисправимых романтиков

CSS – очень простой язык с большим потенциалом. Если вы хоть самую малость разбираетесь в геометрии, то легко сможете превратить окно браузера в холст для собственных шедевров.

Хватит применять CSS только для работы. Используйте его в личных целях без всякого смущения! Сделайте хотя бы простую, но симпатичную валентинку для дорогого человека.

Создаем

Как сделать сердце на CSS из простейших геометрических фигур? Очень просто: достаточно двух кругов и одного квадрата, повернутого на 45 градусов.

My heart will beat on! Сердце на CSS для неисправимых романтиков

В CSS мы легко можем обойтись одним контейнером – привлечем к делу псевдоселекторы :before и :after. Это псевдоэлементы, которые вроде есть, но нет. В HTML и DOM вы их не найдете, но если добавить стили, то на странице они появятся. :before вставляется перед контентом блока, а :after – после.

Таким образом, в HTML мы имеем один элемент:

А CSS вот такой:

Сам блок с классом heart – это квадрат, повернутый на 45 градусов против часовой стрелки с помощью свойства transform. Псевдоэлементы :before и :after – такие же квадраты, однако углы у них скруглены на 50%, поэтому выглядят они как круги. Взаиморасположение элементов обеспечивается с помощью абсолютного позиционирования.

Оживляем

Влюбленное сердце должно пылко биться, поэтому давайте добавим жизнь в наше творение.

На помощь спешит CSS-правило @keyframes, в котором можно определить один цикл анимации.

Нужно разделить все действие на отдельные шаги (занимающие определенный процент общего времени) и для каждого описать необходимую трансформацию. У нас будет 3 шага.

  1. Начинается все (0%) без трансформаций.
  2. На 20% от общего времени фигура достигает 125% от исходного размера.
  3. К 40% она увеличивается до 150%.
  4. Оставшиеся 60% времени происходит постепенное уменьшение до первоначального состояния.

Запустим наше сердце с помощью правила animation:

Это сердце на CSS будет биться вечно (infinite) – или столько, сколько длится ваша любовь 🙂

Желаем вам прекрасного Дня святого Валентина!

Оригинал: How to create a beating heart with pure CSS for your valentine

Полезные статьи по CSS

proglib.io

Добавить комментарий

Ваш e-mail не будет опубликован.

четырнадцать + одиннадцать =