Twitter 红心点赞 CSS3 动画按钮特效

一、前言

通过使用 CSS3 动画特性，实现当用户点赞时的动画特效。使用这种动画效果，可以替换网页中的一些 GIF 动画图片、Flash 动画和 JavaScript 动画，相比之下 CSS3 动画优势很明显，它体量更轻，更易维护，加载速度更快。

创建 CSS3 动画需要使用@keyframes规则，在@keyframes中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

当用户点击红心时，出现烟花爆炸效果的动画，同时点赞数加一，再次点击可取消点赞，同时点赞数减一。

红心点赞效果截图

二、实现红心点赞动画

1、新建 HTML 页面

其中“红心点赞”的 HTML 代码如下：

<div class="feed">
    <p>示例 1</p>
    <div class="heart" id="like1" rel="like"></div>
    <div class="likeCount" id="likeCount1">15</div>
</div>
<div class="feed">
    <p>示例 2</p>
    <div class="heart" id="like2" rel="like"></div>
    <div class="likeCount" id="likeCount2">21</div>
</div>
<div class="feed">
    <p>示例 3</p>
    <div class="heart" id="like3" rel="like"></div>
    <div class="likeCount" id="likeCount3">37</div>
</div>

页面中可重复出现多个“红心点赞”，以 HTML 元素<div class="feed">...</div>节点为一个红心点赞，其中元素<div class="heart" id="like1" rel="like"></div>节点为展示红心并执行动画，其中元素<div class="likeCount" id="likeCount1">15</div>节点为展示点赞数。

2、引入 heart.css 样式文件

红心点赞 CSS 代码如下：

.heart {
    background: url(../images/web_heart_animation.png);
    background-position: left;
    background-repeat: no-repeat;
    height: 100px;
    width: 100px;
    cursor: pointer;
    position: absolute;
    left: -14px;
    background-size: 2900%;
}
    .heart:hover, .heart:focus {
        background-position: right;
    }
@-webkit-keyframes heartBlast {
    0% {
        background-position: left;
    }
    100% {
        background-position: right;
    }
}
@keyframes heartBlast {
    0% {
        background-position: left;
    }
    100% {
        background-position: right;
    }
}
.heartAnimation {
    display: inline-block;
    -webkit-animation-name: heartBlast;
    animation-name: heartBlast;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: steps(28);
    animation-timing-function: steps(28);
    background-position: right;
}
.feed {
    height: 150px;
    position: relative;
    margin-bottom: 20px;
}
    .feed p {
        font-family: "Microsoft YaHei",'Georgia', Times, Times New Roman, serif;
        font-size: 20px;
    }
.likeCount {
    font-family: 'Georgia', Times, Times New Roman, serif;
    margin-top: 32px;
    margin-left: 68px;
    font-size: 25px;
    color: #999999;
}

观察上面的 CSS 代码，其中主要用到了 CSS3 动画@keyframes规则，@keyframes heartBlast规定动画的名称为heartBlast，动画内容为将背景图片的定位，由左边变换至右边。在.heartAnimation类选择器中使用了动画animation-name: heartBlast;，其中animation-duration: .8s;规定动画的时长为 0.8 秒，animation-iteration-count: 1;规定动画播放 1 次，animation-timing-function: steps(28);规定动画的速度曲线，使用steps(28)值表示为一个阶跃函数，并阶跃 28 次。

可以总结为：将元素背景图片定位，由左向右逐帧显示一次，并在 0.8 秒的时间内显示完毕。

关于animation-timing-function: steps(28);可看这篇文章《CSS3 动画属性 animation-timing-function: steps》

3、引入 heart.js 脚本文件

红心点赞的 JavaScript 代码如下：

$(document).ready(function () {
    $(".heart").on("click", function () {
        var heart = $(this);
        var likeCount = $("#likeCount" + heart.attr("id").split("like")[1]);
        var intCount = parseInt(likeCount.html());
        var rel = heart.attr("rel");
        heart.css("background-position", "");
        if (rel === "like") {
            likeCount.html(intCount + 1);
            heart.addClass("heartAnimation").attr("rel", "unlike");
        } else {
            likeCount.html(intCount - 1);
            heart.removeClass("heartAnimation").attr("rel", "like");
            heart.css("background-position", "left");
        }
    }).on("mouseleave", function () {
        $(this).css("background-position", "");
    });
});

观察上面 JavaScript 代码，主要是通过在 HTML 元素上绑定click事件，当用户点击红心时，切换元素的 CSS 样式类.heartAnimation达到显示动画效果的目的。另外需要注意，在 HTML 页面中要引入 jQuery 库文件。

4、引入 HTML 元素背景图

背景图太长，下面是部分截取。

三、下载完整文件

点击链接，下载演示文件：Twitter 红心点赞 CSS3 动画按钮特效

（完）