Главная » HTML & CSS » Эффект биения сердца на чистом CSS3

Эффект биения сердца на чистом CSS3

Эффект биения сердца на чистом CSS3

Как «нарисовать» хорошо всем знакомый символ сердца с помощью , показал на примере в одной из своих статей: «Рисуем сердце с помощью CSS3».
Сегодня хочу показать, как можно оживить это сердечко, добавив визуальный эффект биения. Для этого нам понадобится чуточку магии свойств CSS3 и несколько строк несложного кода. Анимация CSS при правильном её использовании порой вообще творит чудеса, это лишь один из самых простейших примеров её применения.
Подробно раскладывать весь фарш на составляющие не буду, вся база практически такая же, как в первом варианте, ну, а с анимацией будет нетрудно разобраться взглянув на исходники.

Сразу хочу предупредить, что сердечко смотрится во всей красе только на светлом фоне, тёмный фон выдаёт контуры наложения, что конечно же не есть хорошо, так что рисуем на светлом «холсте».

Смотрите пример, копайте исходники в онлайн-редакторе и если понравится, смело забирайте, может где и пригодится.
 

 
Как вы понимаете div-контейнер demo вам не нужен, использовал его только для примера, дабы разместить строго по центру. Вам понадобится вот такая небольшая -конструкция, для вывода сердечка на странице:
 

<div id="heart"><div class="k"></div></div>

 
На этом всё!

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

 

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru