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

PetitQ 其他代码 2019-5-16 7.62K 0 47

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

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>
```

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

已有 1904 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

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

HTML 结构

CSS 样式

JavaScript

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

相关文章

CSS3炫酷loading加载动画特效

SVG打造可爱bongo cat打字动画特效

基于Canvas的Photoshop样式网页涂鸦板

发表回复取消回复

热销模板

其他代码

HTML 结构

CSS 样式

JavaScript

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复