vue内实现风车转动，鼠标悬浮停止并放大，鼠标移出继续转动

本文链接：https://blog.youkuaiyun.com/weixin_44975002/article/details/132455798

本文介绍如何在Vue项目中创建一个风车转动的效果，并在鼠标悬浮时风车停止转动且放大显示，鼠标移出后恢复转动。通过结合Vue的指令和JavaScript动画实现交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="box">
      <div id="main" @mouseover="mouseoverFun" @mouseleave="mouseleaveFun">
        <div class="css1">
          <div class="leftTitle">战略性新兴产业</div>
          <div class="corporateBrand">企业品牌
            <!-- <span class="container1"> -->
            <img v-for="item in imgList" :src="item" @click="changeOne(item)" alt="" class="hover-zoom">
            <!-- </div> -->
          </div>
          <div class="Branding">产品品牌
            <div class="container2">
              <img v-for="item in imgList" :src="item" @click="changeOne(item)" alt="" class="hover-zoom">
            </div>
          </div>
          <div class="serviceBrand">服务品牌
            <span class="container3">
              <img v-for="item in imgList" :src="item" @click="changeOne(item)" alt="" class="hover-zoom">
            </span>
          </div>
          <div class="technologicalBrand">技术品牌
            <!-- <span class="container4" > -->
            <img v-for="item in imgList" :src="item" @click="changeOne(item)" alt="" class="hover-zoom">
            <!-- </span> -->
          </div>

        </div>
        <div class="css2">
          <div class="infoBox">
            <div class="topTitle">金融业务</div>
            <div class="financialEnterprises">
              企业品牌
            </div>
            <div class="financialEnterprisesBox">
              <img v-for="item in imgList" :src="item" @click="changeOne(item)" alt="" class="hover-zoom">
            </div>
            <div class="financialProducts">
              产品品牌
            </div>
            <div class="financialProductsBox">
              <img v-for="item in imgList" :src="item" @click="changeOne(item)" alt="" class="hover-zoom">
            </div>
          </div>

        </div>
        <div class="css3">
          <div class="infoBox">
            <div class="rightTitle">支撑产业</div>
            <div class="supportServices">
              服务品牌
            </div>
            <div class="supportServicesBox">
              <img v-for="item in imgList" :src="item" @click="changeOne(item)" alt="" class="hover-zoom">
            </div>
            <div class="supportingTechnology">
              技术品牌
            </div>
            <div class="supportingTechnologyBox">
              <img v-for="item in imgList" :src="item" @click="changeOne(item)" alt="" class="hover-zoom">
            </div>