效果圖：

run.gif

這種效果純css也是可以實(shí)現(xiàn)的，點(diǎn)這里就能看到純css寫的 ??但是用animejs你會(huì)發(fā)現(xiàn)方便很多，下面就直接上代碼了~~~
原理看懂了，其他效果或樣式自己也可以整著玩了 o(￣▽￣)o ?

代碼如下：

<template>
  <div class="overall">
    <div class="person">
      <div class="head"></div>
      <div class="body">
        <div class="hand left"></div>
        <div class="hand right"></div>
      </div>
      <div class="leg">
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </div>
  </div>
</template>

<script>
import anime from "animejs/lib/anime.es.js";
export default {
  mounted() {
    this.play();
  },
  methods: {
    play() {
      anime
        .timeline({
          easing: "easeInOutQuad", //動(dòng)畫速率
          direction: "alternate", //返回執(zhí)行
          duration: 400, //動(dòng)畫時(shí)間
          loop: true //執(zhí)行次數(shù) true 為無限次
        })
        .add({ targets: ".person", rotate: [10, 20] }, 0) //身體是否傾斜
        .add({ targets: ".hand.left", rotate: [80, -50] }, 0) //左手晃動(dòng)幅度
        .add({ targets: ".hand.right", rotate: [-50, 80] }, 0) //右手晃動(dòng)幅度
        .add({ targets: ".leg .left", rotate: [30, -60] }, 0) //左腳晃動(dòng)幅度
        .add({ targets: ".leg .right", rotate: [-60, 30] }, 0); //右腳晃動(dòng)幅度
    }
  }
};
</script>

<style lang="scss" scoped>
.overall {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.person {
  transform-origin: 50% 100%;
  * {
    margin: 0 auto;
  }
  .head {
    width: 20px;
    height: 20px;
    background: black;
    border-radius: 50%;
  }
  .body {
    width: 22px;
    height: 50px;
    border-radius: 20px;
    background: black;
    margin-top: 2px;
    position: relative;
    //手樣式
    .hand {
      //肩膀
      position: absolute;
      width: 10px;
      height: 25px;
      left: calc(50% - 5px);
      top: 7px;
      border-radius: 10px;
      background: black;
      transform-origin: 50% 0;
      &::after {
        //手臂
        content: "";
        width: 10px;
        height: 25px;
        border-radius: 10px;
        background: black;
        position: absolute;
        bottom: 5px;
        left: -3px;
        transform-origin: 50% 100%;
        transform: rotate(130deg); //手臂彎曲幅度
      }
    }
    .hand.left {
      z-index: -1;
    }
  }
  .leg {
    width: 10px;
    position: relative;
    top: -10px;
    .left,
    .right {
      // 大腿
      width: 10px;
      height: 30px;
      background: black;
      border-radius: 10px;
      position: absolute;
      transform-origin: 50% 0;
      &::after {
        //小腿
        content: "";
        width: 10px;
        height: 30px;
        border-radius: 10px;
        background: black;
        position: absolute;
        bottom: 5px;
        left: 2px;
        transform-origin: 50% 100%;
        transform: rotate(-130deg); //小腿彎曲幅度
      }
    }
  }
}
</style>