3D环形旋转菜单

效果图

<template>
  <div>
    <div class="area" ref="area">
      <div class="ball ball1">
        <img ref="img" src="../../assets/bi_img/home2/icon01.png" alt="" />
      </div>
      <div class="ball ball2">
        <img ref="img" src="../../assets/bi_img/home2/icon02.png" alt="" />
      </div>
      <div class="ball ball3">
        <img ref="img" src="../../assets/bi_img/home2/icon03.png" alt="" />
      </div>
      <div class="ball ball4">
        <img ref="img" src="../../assets/bi_img/home2/icon04.png" alt="" />
      </div>
      <div class="ball ball5">
        <img ref="img" src="../../assets/bi_img/home2/icon05.png" alt="" />
      </div>
      <div class="ball ball6">
        <img ref="img" src="../../assets/bi_img/home2/icon06.png" alt="" />
      </div>
      <div class="ball ball7">
        <img ref="img" src="../../assets/bi_img/home2/icon07.png" alt="" />
      </div>
      <div class="ball ball8">
        <img ref="img" src="../../assets/bi_img/home2/icon08.png" alt="" />
      </div>
      <div class="ball ball9">
        <img ref="img" src="../../assets/bi_img/home2/icon09.png" alt="" />
      </div>
      <div class="ball ball10">
        <img ref="img" src="../../assets/bi_img/home2/icon010.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {},
  components: {},
  data() {
    return {};
  },
  created() {
    this.addBall(9, 38);//参数为菜单的个数和旋转一圈需要的时间
  },
  watch: {},
  computed: {},
  mounted() {},
  methods: {
    addBall(num, runtime) {
      this.$nextTick(() => {
        let _parentbox = this.$refs.area;
        let _innerHtml = "";
        for (let i = 0; i < num; i++) {
          let _xtime = parseFloat(runtime / 4);
          let _ytime = parseFloat(runtime / num);
          let _style =
            `
                     animation: anmiteX ` +
            runtime / 2 +
            `s cubic-bezier(0.36, 0, 0.64, 1) -` +
            (_xtime + i * _ytime) +
            `s infinite alternate,
                     anmiteY ` +
            runtime / 2 +
            `s cubic-bezier(0.36, 0, 0.64, 1) -` +
            i * _ytime +
            `s infinite alternate,
                     scale ` +
            runtime +
            `s cubic-bezier(0.36, 0, 0.64, 1) -` +
            i * _ytime +
            `s infinite alternate;
                     `;

          _innerHtml +=
            `<div class=" ball` +
            (i + 1) +
            ` ball " Style="` +
            _style +
            `">`+
                   '<img ref="img" src="'+require(`../../assets/bi_img/home2/icon0${i+1}.png`)+'" alt="" />'
                        +`</div>`;
        }
        _parentbox.innerHTML = _innerHtml;
      });
    },
  },
};
</script>
<style lang='scss'>
.area > .ball {
  position: absolute;
}
.area .ball img{
  width: 450px;
  height: 450px;
}

/* 在X轴上的移动 */
@keyframes anmiteX {
  from {
    left: 500px;
  }
  to {
    left: 2350px;
  }
}
/* 在轴上Y的移动 */
@keyframes anmiteY {
  from {
    top: 190px;
  }
  to {
    top: 710px;
  }
}
/* 对元素进行放大缩小，模拟远近，增加透明度 */
@keyframes scale {
  0% {
    transform: scale(0.7, 0.7);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2, 1.2);
    opacity: 1;

  }
  100% {
    transform: scale(0.7, 0.7);
    opacity: 0.5;
  }
}
</style>