其他代码

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>
(2)

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

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

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

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