使用方法
HTML结构
该“点赞”红心按钮的HTML结构是将心形按钮放在一个超链接的后面或下面，它的HTML结果如下：
<div class="feed" id="feed1">
<p>jQuery之家 <a href="http://www.htmleaf.com/">http://www.htmleaf.com/</a></p>
<div class="heart" id="like3" rel="like"></div>
<div class="likeCount" id="likeCount3">24</div>
</div>
CSS样式
整个“点赞”烟花爆炸效果实际上是使用背景图片的连续播放来完成的，它使用一张很长的雪碧（Sprite）图片,然后在点击红心按钮是逐帧进行播放。下面是开始时显示第一帧的CSS样式：
.heart {
background: url(images/web_heart_animation.png)
background-position: left
background-repeat: no-repeat
height: 50px
width: 50px
cursor: pointer
position: absolute
left:-14px
background-size:1450px//实际背景图片尺寸2900px
}
.heart:hover{
background-position: right//显示最后一个红心帧
}
.likeCount{
margin-top: 13px
margin-left: 28px
font-size: 16px
color: #999999
}
下面的代码是逐帧播放红心背景图片，它使用CSS3 keyframe帧动画来完成。
@-webkit-keyframes heartBlast {
0% {background-position: left}
100% {background-position: right}
}
@keyframes heartBlast {
0% {background-position: left}
100% {background-position: right}
}
.heartAnimation {
-webkit-animation-name: heartBlast//webkit内核浏览器
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)//共28个背景图片帧
animation-timing-function: steps(28)
background-position: right
}
JavaScript
在这个“点赞”红心动画特效中使用jQuery代码来使红心按钮在点击时与相应的总点赞数量进行联动。你可以通过ajax来进行数据库操作。当用户点赞时，总数量加1，取消点赞时，总数量减1。
<script>
$(document).ready(function(){
$('body').on("click",'.heart',function(){
var A=$(this).attr("id")
var B=A.split("like")//splitting like1 to 1
var messageID=B[1]
$(this).css("background-position","")
var D=$(this).attr("rel")
$.ajax({
type: "POST",
url: "message_like_ajax.php",
data: dataString,
cache: false,
success: function(data){
$("#likeCount"+messageID).html(data)
if(D === 'like') {
$(this).addClass("heartAnimation").attr("rel","unlike")//applying animation class
}
else{
$(this).removeClass("heartAnimation").attr("rel","like")
$(this).css("background-position","left")
}
})//ajax end
})//heart click end
})
</script>
首先绘制一个烟花。Ctrl+F8新建一个图片元件，取名烟花。N键调出线条工具如图拉出两条线。flash遮罩实例——烟花
2
V键改为选择工具，如图拖动线条逐步改变成满意的形状，使其成为烟花的一根线条。填充上颜色，因为将来是作为遮罩层，所以，颜色随意。
flash遮罩实例——烟花
3
选中后按住Alt键复制多个，改变大小、弧度，最后形成一个完整的烟花。
flash遮罩实例——烟花
4
新建一个图片元件，取名彩遮罩。O键调出椭圆工具，按住shift键画出一个正圆，颜色如图设置。
flash遮罩实例——烟花
5
打开库面板，可以用Ctrl+L键打开。选中彩遮罩，右键——直接复制，复制出5个，分别改名：黄、蓝、绿、玫红遮罩。
flash遮罩实例——烟花
6
双击红遮罩，进入编辑，将颜色如图改变，注意中心透明。
flash遮罩实例——烟花
7
其余遮罩颜色如图。真正操作时这些彩色渐变是放在被遮罩层使用。
flash遮罩实例——烟花
flash遮罩实例——烟花
END
二、制作烟花动画
Ctrl+F8新建一个影片剪辑元件，我为它取名烟花组合。前面空出三帧，后面会放入声音，空几帧，造成先有声音，后出烟花的效果。第四帧F6掺入关键帧，放入玫红遮罩。
flash遮罩实例——烟花
新建图层2，同样在第四帧插入关键帧，放入烟花元件。
flash遮罩实例——烟花
图层1第25帧插入关键帧，Q键调出变形工具，按住shift键将玫红遮罩变形框向外拖动，使该元件同比例放大。相反，图层2第25帧插入关键帧，将烟花元件缩小。随后，回到第四帧，为每一层创建补间动画。
flash遮罩实例——烟花
图层2，第26帧F7插入空白关键帧。选中4——25帧，按住Alt键拖动复制到第31帧，使31——52帧出现同样动画。同样，重复刚才的动作，使图层2出现三个烟花由小变大的动画。如图。
flash遮罩实例——烟花
图层1同上处理。随后Ctrl+F3调出属性面板，选中第31帧，点“交换”按钮，在出现的交换元件面板中选择绿遮罩元件，同样将每一组动画的前一帧与最后帧换成相同的遮罩。这里第三组元件我换成了彩遮罩。至此，完成了一个烟花组合。
flash遮罩实例——烟花
图层2右键——遮罩层，将图层2、1改成遮罩与被遮罩关系。
flash遮罩实例——烟花
同样，我们用另外三个遮罩，完成另一种色彩的烟花组合。这里，我复制了一个烟花元件，将每一根线条稍作扭曲，产生断续感。并且将帧数加长，使场景中的烟花渐续绽放。
flash遮罩实例——烟花
