vue展示五个图形并且两边小中间大并且自己移动源码

在Vue.js中创建这样的动态图形效果，通常会结合HTML、CSS和JavaScript（包括Vue组件）。我们可以假设这个需求是使用SVG元素来构建，因为SVG能方便地创建矢量图形，并且支持动画。

首先，创建一个Vue组件，例如`CircleElement.vue`：

<template>
  <div class="circle-container">
    <svg :width="containerWidth" :height="containerHeight">
      <circle v-for="(item, index) in circles" :key="index"
              :cx="calculateX(index)"
              :cy="circleY"
              :r="circleSize * item.size"
              fill="blue"
              @mouseover="onMouseOver(index)">
      </circle>
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    containerWidth: {
      type: Number,
      required: true
    },
    containerHeight: {
      type: Number,
      required: true
    },
    circleCount: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      circles: Array(this.circleCount).fill({ size: 0.6 }),
      circleY: this.containerHeight / 2,
      circleSize: 100 // 根据容器大小调整
    };
  },
  methods: {
    calculateX(index) {
      return (this.containerWidth / 2) - (this.circles[index].size * this.circleSize);
    },
    onMouseOver(index) {
      this.circles[index].size = Math.min(0.8, this.circles[index].size + 0.05); // 按需调整增加速度
    }
  }
};
</script>

<style scoped>
.circle-container {
  position: relative;
  display: flex;
  justify-content: space-between;
}

circle {
  transition: transform 0.5s ease-in-out;
}
</style>

在这个组件中，我们有五个圆形元素（`circle`），大小从左到右逐渐变小，中间最大。当鼠标悬停在某个圆上时，该圆会稍微增大。`calculateX`函数用于计算每个圆的位置，`onMouseOver`则处理交互事件。

在主应用文件（如App.vue）中引入并使用此组件：

<template>
  <div id="app">
    <CircleElement
      :containerWidth="containerWidth"
      :containerHeight="containerHeight"
    ></CircleElement>
  </div>
</template>

<script>
import CircleElement from './components/CircleElement.vue';

export default {
  components: {
    CircleElement
  },
  data() {
    return {
      containerWidth: 400,
      containerHeight: 400
    };
  }
};
</script>