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

10
7541
Добавить в избранное

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

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

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

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

Создаем

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

В 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

Интересуетесь фронтендом?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Комментариев: 10

  1. Отлично, всё получилось!

  2. h1 class=»toMywife»>Люблю тебя, малышка !!!
    h2 class=»my-heart»>♥

    @keyframes heartBeats {
    0%{ transform: scale(1) translate(-50%,-50%);
    }
    20% { transform: scale(1.25) translate(-50%,-50%);
    }
    40% { transform: scale(1.5) translate(-50%,-50%);
    }
    80% { transform: scale(1.25) translate(-50%,-50%);
    }
    100% { transform: scale(1) translate(-50%,-50%);
    }
    }

    @keyframes textBlink {
    0% { color: transparent;
    }
    50% { color: #ff0000;
    }
    }

    .my-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    margin: 0 auto;
    transition-duration: .5s;
    transform: translate(-50%,-50%);
    color: #ff0000;
    font-size: 250px;
    }

    .my-heart {
    animation: heartBeats 1s infinite;
    }

    .toMywife {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    color: transparent;
    transition-duration: .7s;
    }

    .toMywife {
    animation: textBlink 3s infinite;
    animation-delay: 2s;
    }

  3. Подправил, чтобы вкуснее смотрелось 😉

    @keyframes heartBeats {
    0% {
    transform: scale(1) rotate(-45deg);
    }
    20% {
    transform: scale(1.25) rotate(-45deg);
    }
    40% {
    transform: scale(1.5) rotate(-45deg);
    }
    80% {
    transform: scale(1.25) rotate(-45deg);
    }
    100% {
    transform: scale(1) rotate(-45deg);
    }
    }

    .my-heart {
    position: absolute;
    top: 50%;
    left: 50%;

    display: inline-block;

    width: 90px;
    height: 90px;
    margin: 0 auto;

    transition-duration: .5s;
    transform: translate(-50%, -50%) rotate(-45deg);

    background-color: red;
    }

    .my-heart::before,
    .my-heart::after {
    position: absolute;

    width: 100px;
    height: 100px;

    content: »;

    border-radius: 50%;
    background-color: red;
    }

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

    .my-heart::after {
    top: -9px;
    left: 34px;
    }

    .my-heart {
    animation: heartBeats 1s infinite;
    }

  4. Михаил Андреев
    1. Михаил Андреев
  5. Михаил Андреев

    Хочу предложить свой вариант:

    svg {
    stroke: red;
    fill: red;
    animation-name: change;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    -webkit-animation-name: change;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    }
    @keyframes change {
    0% { stroke-width: 5px;}
    15% {stroke-width: 20px;}
    30% {stroke-width: 10px;}
    45% {stroke-width: 20px;}
    100% {stroke-width: 5px;}
    }
    @-webkit-keyframes change {
    0% {stroke-width: 5px;}
    15% {stroke-width: 20px;}
    30% {stroke-width: 10px;}
    45% {stroke-width: 20px;}
    100% {stroke-width: 5px;}
    }

  6. Рынок Свободный

     position: relative;
     top: 0;
     transform: rotate(-45deg);
     position: absolute;
     left: 45%; top: 45%;
    Гениальный кусок кода, вы бы хоть проверили перед тем как публиковать.

  7. Александр Шемаханов

    кажется автор запутал сам себя:
    position: relative;
    top: 0;
    position: absolute;
    left: 45%; top: 45%;
    В таком случае элемент будет абсолютно спозиционирован или относительно?)))

  8. Péte Béarded

    Исправьте на парное двоеточие, пожалуйста.


    .heart:before,
    .heart:after

  9. Сергей Ермолаев

    Зачем в одном блоке .heart и relative, и absolute?

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