当前位置：首页 > CSS

css怎么制作夜光

2026-04-01 15:34:14CSS

使用CSS制作夜光效果

通过CSS的box-shadow和text-shadow属性可以模拟夜光效果，结合动画增强视觉表现。

元素发光效果

.glow-element {
  background-color: #2a2a2a;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 0 20px 5px rgba(0, 255, 255, 0.7);
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  from {
    box-shadow: 0 0 10px 3px rgba(0, 255, 255, 0.5);
  }
  to {
    box-shadow: 0 0 25px 8px rgba(0, 255, 255, 0.9);
  }
}

文字发光效果

.glow-text {
  color: #e0f7fa;
  text-shadow: 0 0 8px #00ffff;
  font-size: 2rem;
  animation: text-glow 1.5s ease-in-out infinite;
}

@keyframes text-glow {
  0%, 100% {
    text-shadow: 0 0 8px #00ffff;
  }
  50% {
    text-shadow: 0 0 15px #00ffff, 0 0 20px #0080ff;
  }
}

霓虹灯边框效果

通过多重阴影和动画创建更强烈的夜光边框：

.neon-border {
  padding: 20px;
  border: 2px solid transparent;
  border-radius: 10px;
  box-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #00ffff,
    0 0 20px #00ffff;
  transition: box-shadow 0.3s;
}

.neon-border:hover {
  box-shadow: 
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #00ffff,
    0 0 40px #00ffff;
}

荧光按钮实现

结合渐变和阴影创建点击反馈：

css怎么制作夜光

.fluorescent-btn {
  background: linear-gradient(145deg, #00c6ff, #0072ff);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 30px;
  box-shadow: 
    0 0 10px rgba(0, 198, 255, 0.5),
    0 0 20px rgba(0, 114, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.fluorescent-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
  transition: all 0.6s ease;
}

.fluorescent-btn:hover::after {
  left: 100%;
  top: 100%;
}

这些效果通过调整颜色值、阴影大小和动画参数可以创建不同风格的夜光效果。建议在暗色背景上使用以获得最佳视觉效果，同时注意性能影响，避免过度使用高频率动画。

标签: css