qhXWS8fSsN.gif

实现思路：

通过控制css动画的时间，来控制小锤子角度的变化，以及金蛋的消失，因此这里没有用到canvas等过多的js逻辑。

因为结果是确定的，所以在确定结果的情况下，无论砸哪个蛋都是返回这个结果，因此只需要确定用户每次点击金蛋的坐标，实现对应坐标位置金蛋敲击动画的变换，就能实现。

<template>
  <div>
    <div class="chouJiang one">
      <div class="egg" @click="clickOne(index)" v-for="(i,index) in chouJiang.num" :key="index">
        <!-- 锤子图片 -->
        <img
          class="chuizi"
          :class="{'qiao':chouJiang.qiao && chouJiang.egg == index}"
          src="@/assets/img/chuizi.png"
          alt
        />
        <!-- 鸡蛋图片 -->
        <img
          class="eg"
          :class="{'qiao':chouJiang.qiao && chouJiang.egg == index}"
          src="@/assets/img/egg.png"
          alt
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chouJiang: {
        num: 3, //默认蛋数量
        egg: null, //敲击的哪个鸡蛋
        qiao: false, //是否敲击
        result: '谢谢参与', //默认结果
        time: 1000 //多少秒后弹出结果 ms
      }
    }
  },
  methods: {
    //敲击鸡蛋的方法
    clickOne(index) {
      //敲击过一次就不能再敲击
      if (!this.chouJiang.qiao) {
        this.chouJiang.egg = index
        this.chouJiang.qiao = true
        setTimeout(() => {
          alert(this.chouJiang.result)
        }, this.chouJiang.time)
      } else {
        alert('您已经敲过了哦～')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chouJiang {
  margin: 50px 0;
}
/* 砸金蛋 */
.chouJiang.one {
  display: flex;
  justify-content: center;
  transform: scale(0.7);
  .egg {
    height: 150px;
    cursor: pointer;
    // overflow: hidden;
    margin: 0 20px;
    // border: 1px solid #ccc;
    position: relative;
    &:hover .chuizi {
      opacity: 1;
    }
    img {
      user-select: none;
      pointer-events: none;
    }
    .eg {
      height: 100%;
      transform: scale(1.3);
      &.qiao {
        animation: clickOne_eg 0.5s steps(1) 0.4s both 1;
      }
    }
    .chuizi {
      transform-origin: 100% 100%;
      opacity: 0;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 9;
      &.qiao {
        animation: clickOne_chuizi 0.7s ease-in both 1;
      }
    }
  }
  /* 敲鸡蛋后的锤子动画 */
  @keyframes clickOne_chuizi {
    50% {
      transform: rotate(30deg);
    }
    99% {
      opacity: 1;
      transform: rotate(0);
    }
    100% {
      opacity: 0;
      transform: rotate(0);
    }
  }
  /* 敲鸡蛋后的鸡蛋动画 */
  @keyframes clickOne_eg {
    100% {
      opacity: 0;
    }
  }
}
</style>