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

猪宝儿/ 01月12日/ CSS教程/ 浏览 416

若我们想创建一个发光悬停倒影效果,我们可以使用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的动画,使倒影效果在悬停时产生发光效果。


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

发表评论

暂无评论,抢个沙发...

客服 工单