当前位置：首页 > CSS

css制作呼吸灯

2026-04-02 15:35:33CSS

使用CSS动画制作呼吸灯效果

呼吸灯效果可以通过CSS的animation和@keyframes实现，主要原理是让元素的透明度或亮度周期性变化。

基础呼吸灯效果（透明度变化）

css制作呼吸灯

.breathing-light {
  width: 100px;
  height: 100px;
  background-color: #00ff00;
  border-radius: 50%;
  animation: breathe 3s infinite ease-in-out;
}

@keyframes breathe {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

带缩放效果的呼吸灯

css制作呼吸灯

.breathing-pulse {
  width: 80px;
  height: 80px;
  background: #ff0000;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

彩色渐变呼吸灯

.colorful-breathe {
  width: 120px;
  height: 120px;
  background: linear-gradient(45deg, #ff0000, #00ff00);
  border-radius: 50%;
  animation: colorBreathe 4s infinite alternate;
}

@keyframes colorBreathe {
  from { filter: brightness(0.7); }
  to { filter: brightness(1.3); }
}

使用CSS变量控制呼吸灯参数

可以通过CSS变量使效果更易调整：

:root {
  --breath-color: #3498db;
  --breath-duration: 2s;
  --breath-size: 100px;
}

.variable-breathe {
  width: var(--breath-size);
  height: var(--breath-size);
  background-color: var(--breath-color);
  border-radius: 50%;
  animation: var(--breath-duration) ease-in-out infinite breathe;
}

文字呼吸效果

.breathing-text {
  font-size: 24px;
  color: #333;
  animation: textBreathe 3s infinite;
}

@keyframes textBreathe {
  0%, 100% { text-shadow: 0 0 5px rgba(0,0,0,0.2); }
  50% { text-shadow: 0 0 20px rgba(0,0,0,0.5); }
}

这些示例可以根据需要调整动画持续时间、颜色和尺寸等参数。通过组合不同的CSS属性，可以创建各种复杂的呼吸灯视觉效果。