其他代码

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

面包多

Twitter点赞红心按钮CSS3动画特效-创客云
这是一款效果非常炫酷的仿 Twitter“点赞”红心按钮 CSS3 动画特效。该“点赞”特效使用一颗心形按钮,在用户点击心形按钮的时候,心形按钮由灰色变为红色,同时会在心形按钮的四周产生类似烟花爆炸的效果。

HTML 结构

该“点赞”红心按钮的 HTML 结构是将心形按钮放在一个超链接的后面或下面,它的 HTML 结果如下:

也想出现在这里?联系我们
创客主机
  1. <div class="feed" id="feed1">
  2.   <p>jQuery之家 <a href="http://www.htmleaf.com/">http://www.htmleaf.com/</a></p>
  3.   <div class="heart" id="like3" rel="like"></div>
  4.   <div class="likeCount" id="likeCount3">24</div>
  5. </div>

CSS 样式

整个“点赞”烟花爆炸效果实际上是使用背景图片的连续播放来完成的,它使用一张很长的雪碧(Sprite)图片,然后在点击红心按钮是逐帧进行播放。下面是开始时显示第一帧的 CSS 样式:

  1. .heart {
  2.   background: url(images/web_heart_animation.png);
  3.   background-position: left;
  4.   background-repeat: no-repeat;
  5.   height: 50px;
  6.   width: 50px;
  7.   cursor: pointer;
  8.   position: absolute;
  9.   left:-14px;
  10.   background-size:1450px; //实际背景图片尺寸2900px
  11. }
  12. .heart:hover{
  13.   background-position: right; //显示最后一个红心帧
  14. }
  15. .likeCount{
  16.   margin-top: 13px;
  17.   margin-left: 28px;
  18.   font-size: 16px;
  19.   color: #999999
  20. }

下面的代码是逐帧播放红心背景图片,它使用 CSS3 keyframe 帧动画来完成。

  1. @-webkit-keyframes heartBlast {
  2.   0% {background-position: left;}
  3.   100% {background-position: right;}
  4. }
  5.  
  6. @keyframes heartBlast {
  7.   0% {background-position: left;}
  8.   100% {background-position: right;}
  9. }
  10.  
  11. .heartAnimation {
  12.   -webkit-animation-name: heartBlast; //webkit内核浏览器
  13.   animation-name: heartBlast;
  14.   -webkit-animation-duration: .8s;
  15.   animation-duration: .8s;
  16.   -webkit-animation-iteration-count: 1;
  17.   animation-iteration-count: 1;
  18.   -webkit-animation-timing-function: steps(28); //共28个背景图片帧
  19.   animation-timing-function: steps(28);
  20.   background-position: right;
  21. }

JavaScript

在这个“点赞”红心动画特效中使用 jQuery 代码来使红心按钮在点击时与相应的总点赞数量进行联动。你可以通过 ajax 来进行数据库操作。当用户点赞时,总数量加 1,取消点赞时,总数量减 1。

  1. <script>
  2. $(document).ready(function(){
  3.   $('body').on("click",'.heart',function(){
  4.     var A=$(this).attr("id");
  5.     var B=A.split("like"); //splitting like1 to 1
  6.     var messageID=B[1];
  7.     $(this).css("background-position","")
  8.     var D=$(this).attr("rel");
  9.  
  10.     $.ajax({
  11.       type: "POST",
  12.       url: "message_like_ajax.php",
  13.       data: dataString,
  14.       cache: false,
  15.       success: function(data){
  16.       $("#likeCount"+messageID).html(data);
  17.       if(D === 'like') {
  18.         $(this).addClass("heartAnimation").attr("rel","unlike"); //applying animation class
  19.       }
  20.       else{
  21.         $(this).removeClass("heartAnimation").attr("rel","like");
  22.         $(this).css("background-position","left");
  23.       }
  24.     }); //ajax end
  25.  
  26.   });//heart click end
  27.  
  28. });
  29. </script>
(17)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!