当前位置：首页 > CSS

css发光按钮制作

2026-02-13 07:46:33CSS

使用box-shadow实现发光效果

为按钮添加box-shadow属性可模拟发光效果。通过调整模糊半径和颜色增强光感：

.glow-button {
  box-shadow: 0 0 10px 5px rgba(0, 255, 255, 0.7);
  background-color: #00ffff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
}

rgba中的透明度（0.7）可控制光线柔和度，模糊半径（10px）越大光晕越扩散。

结合transition实现悬停动态发光

通过:hover伪类和transition让发光效果交互更流畅：

.glow-button-hover {
  background-color: #ff6b6b;
  transition: box-shadow 0.3s ease;
}
.glow-button-hover:hover {
  box-shadow: 0 0 20px 8px rgba(255, 107, 107, 0.6);
}

过渡时间（0.3s）控制动画速度，悬停时增大模糊半径（20px）强化发光效果。

使用text-shadow为文字添加光效

若需按钮文字发光，可叠加text-shadow属性：

.glow-text {
  color: white;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

适用于深色背景按钮，光晕颜色（白色）与文字颜色一致时效果最佳。

多重阴影增强层次感

组合多个box-shadow值创建复杂光效：

.multi-glow {
  box-shadow: 
    0 0 5px 2px rgba(255, 0, 0, 0.5),
    0 0 15px 10px rgba(0, 255, 0, 0.3),
    0 0 30px 15px rgba(0, 0, 255, 0.2);
}

每层阴影用逗号分隔，从内到外模糊半径递增，形成霓虹灯式多层辉光。

关键帧动画实现脉冲发光

通过@keyframes制作周期性闪烁效果：

@keyframes pulse {
  0% { box-shadow: 0 0 5px 2px rgba(100, 200, 255, 0.5); }
  50% { box-shadow: 0 0 20px 10px rgba(100, 200, 255, 0.8); }
  100% { box-shadow: 0 0 5px 2px rgba(100, 200, 255, 0.5); }
}
.pulse-button {
  animation: pulse 2s infinite;
}

动画时长（2s）控制闪烁频率，关键帧中调整阴影参数实现呼吸式光效。

css发光按钮制作