CSS发光悬停倒影效果的写法

若我们想创建一个发光悬停倒影效果，我们可以使用CSS的@keyframes动画和:hover伪类来实现。

提供一个简单的示例代码，仅供参考：

.element {  
  /* 初始状态 */  
  background-color: #ff0000;  
  color: #ffffff;  
  padding: 20px;  
  text-align: center;  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);  
  transition: all 0.3s ease;  
    
  /* 悬停状态 */  
  &:hover {  
    /* 发光效果 */  
    background-color: #800080;  
    color: #ffffff;  
      
    /* 倒影效果 */  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);  
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.75);  
    transform: translateY(-2px);  
      
    /* 定义动画 */  
    animation: glow 1s infinite;  
  }  
    
  /* 动画关键帧 */  
  @keyframes glow {  
    0% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }  
    50% { box-shadow: 0 4px 8px rgba(0, 0, 0, 1); }  
    100% { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }  
  }  
}

上述代码示例中，.element是添加发光悬停倒影效果的元素的类名。

当鼠标悬停在该元素上时，它会改变背景颜色、文字颜色和添加倒影效果。

同时，通过@keyframes定义了一个名为glow的动画，使倒影效果在悬停时产生发光效果。

代码示例中，可以根据自己需求调整颜色、阴影和动画的参数来达到自己想要的效果。