CSS左右摆动动效

 

基础图片，是由一个手部图和一张箭头图而成

代码开箱即用

<template>
  <div class="canvas_box" @click="hanldShow">
    <div class="hander-icon">
      <div class="shou" @animationend="hanldShow"></div>
    </div>
  </div>
</template>

<script>
let timer = null;

let backgroundBlock = 0; // 当前播放进度
let positionTime = null; // 控制动画

export default {
  data() {
    return {
      point: 0,
      isLoading: true,
      height: 0,
      maxPoint: 4,
      isShow: true,
      position: {
        x: 0,
        y: 0,
      },
    };
  },
  mounted() {
    for (let i = 0; i < this.maxPoint; i++) {
      // setTimeout(() => {
      this.move(i);
      // }, 100);
    }
  },
  methods: {
    hanldShow() {
      this.isShow = false;
    },
    move(point) {
      if (point === this.point) return;
      this.point = point;
      const target = point * 20 - 1;
      this.movePosition(target > 0 ? target : 0);
    },

    movePosition(target) {
      const height = 240;
      let animation = () => {
        const tag = target > backgroundBlock ? -1 : 1;
        this.position.y += tag * height;
        backgroundBlock += -tag * 1;
        clearTimeout(positionTime);
        if (Math.abs(this.position.y + height * target) > 1) {
          positionTime = setTimeout(animation, 60);
        }
      };
      clearTimeout(positionTime);
      positionTime = setTimeout(animation, 10);
    },

    handleStopTimer() {
      clearInterval(timer);
      timer = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.hander-icon {
  width: r(750);
  height: r(680);
  border: 1px solid red;
  // background: url('https://.png') no-repeat
  //   center center;
  // background-size: 100% auto;
  display: flex;
  justify-content: center;
  align-items: center;
  .shou {
    width: r(200);
    height: r(200);
    animation: shou 1.5s linear 120 forwards;
    transform-origin: center center;
    border: 1px solid;
    // background: url('https://.png') no-repeat center center / 100% auto;
  }
}
@keyframes shou {
  25%,
  75% {
    transform: translateX(0) rotate(35deg);
  }
  50% {
    transform: translateX(-30%) rotate(20deg);
  }
  0%,
  100% {
    transform: translateX(30%) rotate(50deg);
  }
}
.canvas_box {
  // position: relative;
  width: r(750);
  height: r(750);
  // background: linear-gradient(to bottom, #fbf0dd, #f5e5cc);
  border-radius: r(8);
  box-sizing: border-box;
  position: absolute;
  z-index: 10020;
  border: 1px solid red;
  background-color: navajowhite;
}
</style>