动画像按钮点击它 [英] Animate like button when click on it

问题描述

我想要一些动画，像Twitter的Like按钮。我从Twitter截图。这是来自它的动画的一些图片：

1：

3：

I want some animation like Twitter's Like button . I've taken screenshot from Twitter . Here is some images from it's animation:

1:

2:

3:

Do you know any good jQuery library or CSS3 library to use animation like this?

解决方案

HTML:

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

CSS:

.heart {
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-image:url(  'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
  background-position: left;
  background-repeat:no-repeat;
  background-size:2900%;
 }

 .heart:hover {
  background-position:right;
 }

 .animating {
  animation: heart-burst .8s steps(28) 1;
 }

 @keyframes heart-burst {
 from {background-position:left;}
 to { background-position:righ;}
 }

JAVASCRIPT:

$(".heart").on('click touchstart', function(){
  $(this).toggleClass('animating');
});


$(".heart").on('animationend', function(){
  $(this).toggleClass('animating');
});

Check the fiddle: https://fiddle.jshell.net/0yyegtv9/

这篇关于动画像按钮点击它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！