2015-11-04 4 views
0

Twitter недавно изменили свои любимые значок из желтой звезды в красное сердце, что оживляет и искрится блеском при нажатии.Как реализовать анимацию сердца Twitter?

Я хотел бы реализовать значок сердца как Twitter, где приятная анимация следует, когда пользователь щелкает по сердцу, а что-то любит. Мой текущий значок сердца только окрашивается в красный цвет, когда пользователь нажимает на него.

Как реализовать эта анимация с помощью CSS3 анимации или Javascript?

Вот конкретная анимация:

FIRST

SECOND

THIRD

FOURTH

FIFTH

SIXTH

SEVEN

EIGHT

NINE

+0

По внешнему виду, они используют спрайт, и я думаю, что они просто перемещают фоновое положение. Я думаю, что это достигается добавлением класса с использованием javascript, который содержит либо переход, либо ключевой кадр в их css? – Dan

+2

Здесь вы идете, вот бесконечный цикл с ним http://codepen.io/danjford/pen/bVxVBd?editors=110 – Dan

+0

@ Dan Ничего себе, сделайте этот ответ, и я вручу его вам. – Kelseydh

ответ

1

это может быть достигнуто что-то вроде

<i class="glyphicon glyphicon-heart"></i> 


window.setInterval(function(){ 
    $('.heart').animate({fontSize: "55px"}, 300); 
    $('.heart').animate({fontSize: "50px"}, 400); 
}, 1000); 

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