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