uniapp点击显示心形动画存档

ChooseJ

于 2024-06-20 13:45:41 发布

阅读量152

点赞数 3

文章标签： uni-app

本文链接：https://blog.csdn.net/ChooseJ/article/details/139830361

版权

由于uniapp中css不支持~符号，可以使用以下方式代理：

<label @click="setCollect" class="like">
	<view class="iconfont" :class="{'icon-shoucang1 beat': tt, 'icon-shoucang': !tt}">
		<view :class="{'ani12': tt}"></view>
	</view>
    <text class="num">120</text>
</label>


//click事件
setCollect() {
	// 切换状态
	this.tt = !this.tt;
},

.beat {
        animation: beat 1s linear;
    }
        .ani12{
        position: absolute;
        width: 30rpx;
        height: 30rpx;
        bottom: 4rpx;
        left: 3rpx;
        border-radius: 50%;
        box-shadow: 0 40rpx 0 -12rpx #ff0000,
                    40rpx 0 0 -12rpx #ff0000,
                    0 -40rpx 0 -12rpx #ff0000,
                    -40rpx 0 0 -12rpx #ff0000,
                    -28rpx 28rpx 0 -12rpx #ff0000,
                    -30rpx -30rpx 0 -12rpx #ff0000,
                    30rpx -30rpx 0 -12rpx #ff0000,
                    28rpx 28rpx 0 -12rpx #ff0000;
        opacity: 1;
        animation: blink .5s ease-out forwards;
    }
    
    @keyframes blink {
      0% {
            transform: scale(0);
          }
          40% {
            opacity: 1;
          }
          100% {
            transform: scale(1.2);
            opacity: 0;
          }
    }
    
    @keyframes beat {
        50%{transform: scale(0.8);}
        100%{transform: scale(1);}
    }