【特效】vue2&css3徒手写实现卡片悬浮、发光案例

前言

使用CSS3与vue2，共同打造卡片悬浮、发光与过渡交互的炫酷效果，来实现一个快捷功能入口案例！实战demo希望对jym有所帮助！

在线查看Demo

可在在线demo里查看完整代码

卡片发光实现方法

• 跟随鼠标的发光标签的坐标计算说明图

逻辑代码部分

    // 鼠标移入事件  
    doMousemove(event,index){ 
      this.currentIndex = index;
      this.$nextTick(()=>{ 
        // 获取卡片dom节点
        const cardRef = this.$refs[`cardRef${index}`][0]   
        const lightRef = this.$refs['lightRef'][0] 
        const x = event.pageX - cardRef.offsetLeft, y = event.pageY - cardRef.offsetTop; 
        // 获取发光节点 
        if(lightRef) { 
          const size = 180
          lightRef.style.width = `${size}px` 
          lightRef.style.height = `${size}px` 
          lightRef.style.left = `${x-size/2}px` 
          lightRef.style.top = `${y-size/2}px`   
        }
        // 设置动画效果
        if(cardRef){ 
          const maxRotation = 5 // X&Y轴旋转角度 
          const rangeSize = 120 // X&Y轴旋转的范围 
          const rotateX = ((x - rangeSize) / rangeSize) * maxRotation // 根据鼠标在 Y 轴上的位置计算绕 X 轴的旋转角度
          const rotateY = -1 * ((y - rangeSize) / rangeSize) * maxRotation // 根据鼠标在 X 轴上的位置计算绕 Y 轴的旋转角度 
          cardRef.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)` //设置 3D 透视
        }
      }) 
    },
    // 鼠标移出事件
    doMouseleave(index){
      this.currentIndex=-1 
      const cardRef = this.$refs[`cardRef${index}`][0]  
      cardRef.style.transform = `perspective(800px) rotateX(0deg) rotateY(0deg)` 
    }    
  }