小程序仿Twitter爱心点赞动画效果

最新推荐文章于 2025-06-28 11:20:26 发布

原创最新推荐文章于 2025-06-28 11:20:26 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #点赞效果 #超炫 #超炫点赞 #小程序点赞

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在微信小程序中创建一个模仿Twitter的爱心点赞动画效果，包含wxml、js和wxss代码实现细节，让点赞交互更加吸引用户。

wxml:

<view class="feed" >
  <view class="heart {{currentSelectTripType == 'like' ? 'active' : ''}}"  bindtap='addAnimateFun' data-id="like" style="background-position: {{cssAnimate}} left;"></view>
</view>

<view class="feed">
  <view class="heart {{currentSelectTripType == 'like2' ? 'active' : 'heartAnimation'}}"  bindtap='addAnimateFun2' data-id="like2" style="background-position: {{cssAnimate}} right;"></view>
</view>

js:


const app = getApp()

Page({

  data: {
    currentSelectTripType:'like'
  },

  addAnimateFun: function (e) {
    this.setData({
    currentSelectTripType: e.currentTarget.dataset.id
    })
  },
  addAnimateFun2:function(e){
    this.setData({
    currentSelectTripType: e.currentTarget.dataset.id
    })
  }

})

wxss:

.heart {
        background: url(http://www.ybpcn.com/skin/ybpcn/img/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;
    }

    .likeCount {
        font-family: 'Georgia', Times, Times New Roman, serif;
        margin-top: 32px;
        margin-left: 68px;
        font-size: 25px;
        color: #999999
    }

    @-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);
        
    }

    .active{
        display: none;
    }
    .feed{
      position: absolute;
      right:6rpx;
    }