高亮光斑按钮小动画

一、期望效果：

鼠标悬停时，光斑随鼠标移动；

二、设计思路

1、按钮高亮部分，即一个渐变背景颜色的圆形，button设置overflow:hidden隐藏多余部分

2、鼠标悬停时，光斑随鼠标移动，获取鼠标事件： @mouseenter：鼠标进入，光标出现 @mousemove：鼠标移动时获取鼠标位置 @mouseleave：鼠标离开，光标隐藏

3、封装组件，为了方便代码以vue为例

//宽、高、颜色都可传入
   <div
      class="TLightBtn cursor"
      ref="btn"
      :style="{width:btnWidth+'px',height:btnHeight+'px',lineHeight:btnHeight+'px'}"
    
      @mouseenter="handleBtnMaskEnter"
      @mousemove="handleBtnMaskChange"
      @mouseleave="returnBtnMaskChange"
    >
    <slot></slot>//插槽用来修改按钮内部文字
      <div
        class="btn_mask"
        :class="btnStatus ? 'mask' : ''"
        :style="{ transform: btnTrans }"
      ></div>
    </div>

复制代码

  .TLightBtn {
    position: relative;
    overflow: hidden;
     background: #2d63fb;
     text-align: center;
      color: $cWhite;
      border-radius: 4px;
    .btn_mask {
      position: absolute;
      top: -50px;
      left: -50px;
      height: 100px;
      width: 100px;
      display: none;
    }
    .mask {
      background: radial-gradient(
        circle closest-side,
        rgba(0, 247, 239, 0.3),
        transparent
      );
      border-radius: 100%;
      display: block;
    }
  }
复制代码

methods: {
    // 是否显示光斑
    handleBtnMaskEnter() {
      this.btnStatus = true;
    },
    // 光斑移动
    handleBtnMaskChange(event) {
      let x = event.clientX; //鼠标x坐标
      let y = event.clientY; //鼠标y坐标
      let btnX = this.$refs.btn.getBoundingClientRect().x;
      let btnY = this.$refs.btn.getBoundingClientRect().y;
      this.btnChangeX = x - btnX;
      this.btnChangeY = y - btnY;
    },
    // 隐藏光斑
    returnBtnMaskChange() {
      this.btnStatus = false;
    },
  },
computed: {
    // 光斑动画
    btnTrans: function () {
      return (
        "translate(" + this.btnChangeX + "px" + "," + this.btnChangeY + "px)"
      );
    },
  },

复制代码