Работая с этим сайтом, вы даете своё согласие на использование файлов cookies. Это необходимо для нормального функционирования сайта, анализа трафика. Подробнее можно почитать в нашей Политике конфиденциальности

Бьющееся сердце на чистом CSS ко дню святого Валентина

Бьющееся сердце на чистом CSS ко дню святого Валентина

Бьющееся сердце на чистом CSS ко дню святого Валентина

В сегодняшний «вёрстке» будем делать бьющееся сердце на чистом CSS. Для этого нужно немного фантазии и чуть-чуть геометрии.

Вольный перевод Dimitris Kiriakakis.

Каждый год 14 февраля многие обмениваются открытками, конфетами, подарками или цветами со своей особой “валентинкой”. День романтики, который мы называем Днем Святого Валентина, назван в честь христианского мученика и восходит к 5 веку, но берет свое начало в римском празднике Луперкалия.

Хорошо, пока все хорошо. Но что может сделать программист?

Мой ответ: используй CSS и будь креативен!

Мне очень нравится CSS. Это не очень сложный язык (это даже не считается языком программирования, большую часть времени). Но с некоторой геометрией, математикой и некоторыми основными правилами CSS, вы можете превратить ваш браузер в холст вашего творчества!

Итак, давайте начнем. Как бы вы создали сердце с чистой геометрией?

 

Вам просто нужен квадрат и два круга. Верно?

И мы можем нарисовать это одним элементом, благодаря ::after и ::before псевдо-элементам. ::after - это псевдо-элемент, который позволяет вставлять контент на страницу из CSS (без необходимости вставлять в HTML). ::before точно такой же, только он вставляет содержимое перед любым другим содержимым в HTML, after после.

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

Так давайте создадим наше сердце.

.heart {
  background-color: red;
  display: inline-block;
  height: 50px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  position: absolute; 
  left: 45%; top: 45%;
  width: 50px;
}

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

.heart:before {
  top: -25px;
  left: 0;
}

.heart:after {
  left: 25px;
  top: 0;
}

Вы можете легко заметить, что мы определяем квадрат и его расположение, используя основной класс .heart и два круга с ::before и ::after псевдо-элементами. Круги на самом деле всего лишь еще 2 квадрата, у которых радиус границы уменьшен до половины.

Но что такое сердце без биения?

Давайте создадим импульс. Здесь мы будем использовать правило @keyframes. @Keyframes в CSS используется для определения поведения одного цикла анимации CSS.

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

Итак, давайте создадим сердцебиение. Наша анимация сердцебиения состоит из 3 шагов:

@keyframes heartbeat {
  0% {
    transform: scale( 1 );    
  }
  20% {
    transform: scale( 1.25 ) 
      translateX(5%) 
      translateY(5%);
  } 
  40% {
    transform: scale( 1.5 ) 
      translateX(9%) 
      translateY(10%);
  }
}
  1. На 0% периода времени мы начинаем без преобразования.
  2. В 20% времени мы масштабируем нашу фигуру до 125% от ее первоначального размера.
  3. На 40% времени мы масштабируем нашу фигуру до 150% от ее первоначального размера.

На оставшиеся 60% времени мы оставляем время для возвращения нашего сердца в исходное состояние.

Наконец, мы должны назначить анимацию нашему сердцу.

.heart {
  animation: heartbeat 1s infinite; // наше сердце имеет бесконечное сердцебиение :)
  ...
}

Ну и конечно финальный результат:


Вверх