CSS怎样制作呼吸灯效果？animation动画循环

爱谁谁

发布时间：2025-08-08 12:15:01

321人浏览过

来源于php中文网

原创

除了不透明度，还可以使用box-shadow、filter: brightness()、transform: scale()、background-color（结合渐变）等属性制作呼吸灯效果；1. box-shadow可通过改变阴影大小和颜色模拟光晕变化；2. filter: brightness()可调整元素亮度实现明暗呼吸；3. transform: scale()能让元素缩放产生心跳感；4. background-color配合渐变可实现色彩流动的呼吸效果；这些属性可单独使用或组合叠加，以增强视觉层次和动态感，最终效果取决于animation-duration、timing-function和keyframes关键帧的精细调控，合理运用可提升界面状态提示、用户引导和交互反馈的体验，但需注意避免过度使用导致视觉疲劳，应与整体设计风格协调统一。

CSS怎样制作呼吸灯效果？animation动画循环

CSS制作呼吸灯效果，核心就是利用

@keyframes

规则配合

animation

属性，让元素的某个视觉属性（比如不透明度、阴影、背景色）在设定的时间周期内，按照预设的百分比变化，形成一种周期性的、类似呼吸的明暗或大小波动。这本身并不复杂，关键在于如何把控好节奏和细节，让它看起来自然且有目的性。

.breathing-light {
    width: 100px;
    height: 100px;
    background-color: #00bcd4; /* 一个漂亮的蓝色 */
    border-radius: 50%; /* 圆形效果 */
    box-shadow: 0 0 15px #00bcd4; /* 初始光晕 */
    animation: breath 2s ease-in-out infinite alternate; /* 动画名称、时长、缓动函数、循环、反向播放 */
}

@keyframes breath {
    0% {
        opacity: 0.4; /* 起始不透明度 */
        transform: scale(0.95); /* 稍微缩小 */
        box-shadow: 0 0 15px #00bcd4; /* 初始光晕大小 */
    }
    50% {
        opacity: 1; /* 中间不透明度，完全可见 */
        transform: scale(1.05); /* 稍微放大 */
        box-shadow: 0 0 40px #00bcd4; /* 光晕变大 */
    }
    100% {
        opacity: 0.4; /* 结束不透明度，回到起始 */
        transform: scale(0.95); /* 再次缩小 */
        box-shadow: 0 0 15px #00bcd4; /* 光晕回到初始大小 */
    }
}

除了不透明度，还有哪些属性可以用来制作呼吸灯效果？

制作呼吸灯效果，不光是

opacity

（不透明度）这一招，实际上，任何能影响元素视觉强度的CSS属性，都可以被我们拿来“呼吸”。这就像是给你的界面元素注入生命力，看你怎么玩。

比如，

box-shadow

就是一个非常棒的选择。你可以让阴影的扩散半径、模糊值甚至颜色周期性地变化，模拟出光晕的扩张与收缩。想象一下，一个按钮在待命状态时，它周围的光晕忽明忽暗，是不是比单纯的颜色变化更显高级？

立即学习“前端免费学习笔记（深入）”；

/* box-shadow 呼吸灯示例 */
.shadow-breather {
    width: 80px;
    height: 80px;
    background-color: #ff6347;
    border-radius: 8px;
    animation: shadowBreath 1.8s ease-in-out infinite alternate;
}

@keyframes shadowBreath {
    0% {
        box-shadow: 0 0 5px rgba(255, 99, 71, 0.7);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 99, 71, 1);
    }
    100% {
        box-shadow: 0 0 5px rgba(255, 99, 71, 0.7);
    }
}

再来是

filter: brightness()

或者

filter: drop-shadow()

。

brightness()

可以直接调整元素的亮度，从暗到亮，再从亮到暗，这种效果特别适合用在图标或者图片上，让它们看起来像在“闪烁”但又不是那种刺眼的闪。

drop-shadow()

则能给元素本身制造一个可变的光影。

background-color

当然也可以，但如果只是纯色变化，可能会显得有点生硬。如果结合

linear-gradient

，让渐变色带在两个颜色之间来回切换，或者让渐变的位置、角度变化，那效果就丰富多了。

还有就是

transform: scale()

。让元素微小的放大和缩小，配合

opacity

或

box-shadow

，能营造出一种“心跳”的感觉。这种结合往往能带来更立体的呼吸感，而不是单一维度的变化。我个人觉得，多种属性的叠加，往往能达到1+1>2的视觉效果。

如何调整呼吸灯的节奏和颜色？

调整呼吸灯的节奏和颜色，其实就是玩转

animation

属性和

@keyframes

里的数值。这就像是给你的灯光效果谱曲，节奏是快是慢，颜色是冷是暖，全凭你指尖的敲击。

节奏的调整：

萝卜简历

免费在线AI简历制作工具，帮助求职者轻松完成简历制作。

下载

animation-duration
：这是最直接的，它决定了动画完成一个周期需要多长时间。比如
```
2s
```
就是2秒完成一个来回。想要慢悠悠的呼吸，就加大这个值；想要急促的闪烁，就减小它。
animation-timing-function
：这个属性决定了动画的速度曲线。
```
ease-in-out
```
是呼吸灯最常用的，因为它能让动画开始和结束时慢，中间快，模拟出自然的光线变化。你也可以尝试
```
linear
```
（匀速）、
```
ease
```
（慢快慢）、
```
cubic-bezier()
```
（自定义曲线）来找到你想要的律动感。我就喜欢用
```
ease-in-out
```
，因为它让整个过程显得特别柔和。
animation-delay
：如果你有多个呼吸灯，或者希望呼吸灯在页面加载后延迟一段时间才开始，这个属性就派上用场了。
@keyframes
中的百分比：在
```
@keyframes
```
里，0%、50%、100%这些百分比，决定了动画在哪个时间点达到什么状态。你可以增加更多的中间点（比如25%、75%），让呼吸过程更复杂，比如先快速变亮，然后缓慢变暗，再快速变亮。这能创造出更不规则、更生动的节奏。

颜色的调整： 颜色通常在

background-color

、

box-shadow

、

color

（如果作用于文字）等属性里进行设置。

在
@keyframes
中直接改变颜色值：这是最直接的方式。比如从一个浅蓝色到深蓝色，再回到浅蓝色。

  @keyframes colorBreath {
      0% { background-color: #a7d9e7; } /* 浅蓝色 */
      50% { background-color: #00bcd4; } /* 标准蓝色 */
      100% { background-color: #a7d9e7; }
  }

结合
rgba()
或
hsla()
调整透明度：如果你想让光晕的颜色保持不变，但通过透明度来模拟明暗，那就使用
```
rgba()
```
或
```
hsla()
```
。比如
```
box-shadow: 0 0 20px rgba(255, 0, 0, 0.3)
```
到
```
rgba(255, 0, 0, 0.8)
```
，红色光晕本身不变，只是透明度在变。这种方式，我认为能更好地保持品牌色调的一致性，同时又能有动态效果。