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

34

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

Як «намалювати» добре всім знайомий символ серця з допомогою css3, показав на прикладі в одній зі своїх статей: «Малюємо серце з допомогою CSS3».
Сьогодні хочу показати, як можна оживити це сердечко, додавши візуальний ефект биття. Для цього нам знадобиться трішки магії властивостей CSS3 і кілька рядків нескладного коду. Анімація CSS при правильному її використанні деколи взагалі творить чудеса, це лише один з найпростіших прикладів її застосування.
Докладно розкладати весь фарш на складові не буду, вся база практично така ж, як у першому варіанті, ну, а з анімацією буде неважко розібратися глянувши на сирці.

Відразу хочу попередити, що сердечко виглядає у всій красі тільки на світлому фоні, темний фон видає контури накладення, що звичайно ж не є добре, так що малюємо на світлому «полотні».

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

Як ви розумієте div контейнер demo вам не потрібен, використовував його лише для прикладу, щоб розмістити серце строго по центру. Вам знадобиться ось така невелика html-конструкція, для виведення сердечка на сторінці:

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

На цьому все!

З Повагою, Андрій .

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