动画实现点赞出现小心心动效

1、页面添加事件

点击事件触发动效标识 aFlag ： true

2、动画容器根据 aFlag 显隐

3、样式 

.heart{

  position: absolute;

  z-index: 10;

  height: 16rpx;

  width: 16rpx;

  top: 0;

   background-image: url('https:../images/heart.png');  // 此处有问题 上篇文章有解决方案

  background-size: contain;

  background-repeat: no-repeat;

}

.path{

  animation: blink 1s ease-in forwards;

  -webkit-animation: blink 1s ease-in forwards;

}

@-webkit-keyframes blink {

  1% {

      transform:  translate(0, 0);

      -webkit-transform: translate(0, 0);

      opacity: .1;

  }

  60% {

      transform:  translate(5px, -10px);

      -webkit-transform: translate(5px, -10px);

      opacity: 1;

  }

  100% {

    transform: translate(0, -20px);

    -webkit-transform: translate(0, -20px);

    opacity: 0;

  }

}

 

@keyframes blink {

  1% {

      transform:  translate(0, 0);

      -webkit-transform: translate(0, 0);

      opacity: .1;

  }

  60% {

      transform:  translate(5px, -10px);

      -webkit-transform: translate(5px, -10px);

      opacity: 1;

  }

  100% {

    transform: translate(0, -20px);

    -webkit-transform: translate(0, -20px);

    opacity: 0;

  }

}