CSS + Vue3 + TS + Setup 实现 7 种经典呼吸灯效果（前端常用动画合集） - 附完整示例（组件复用）

呼吸灯是前端开发中非常高频的 UI 动画效果，常用于：状态指示灯、加载中、告警提示、卡片高亮、边框动态、大屏数据可视化等场景。

效果

目录

效果

一、前言

二、核心原理

三、呼吸灯完整示例演示

1、全效果合集演示（统一预览所有样式）

2、七种独立单文件组件（按需单独使用）

1）基础透明度呼吸灯

2）外发光光晕呼吸灯（业务高频常用）

3）缩放起伏呼吸灯

4）文字呼吸灯

5）边框呼吸灯

6）向内呼吸灯

7）可控开关呼吸灯

3、通用可复用呼吸灯组件（项目业务封装）

1）公共组件文件新建：BreathLight.vue，完整可运行代码如下：

2）父组件标准调用示例

四、核心知识点与业务场景总结

1、向外发光与向内发光核心区别

2、动画参数释义

3、业务场景推荐

五、结语

欢迎关注：【前端小知识营地】

一、前言

本文基于Vue3 + TypeScript + Script Setup语法，整理7 种不重复、经典主流、生产可用的呼吸灯方案，包含：

1. 基础透明度呼吸灯

2. 外发光光晕呼吸灯

3. 缩放起伏呼吸灯

4. 文字呼吸灯

5. 边框呼吸灯

6. 向内呼吸灯

7. 可控开关呼吸灯

文中所有代码均为完整可运行状态，样式自带隔离、TS 类型书写规范，开发者可以直接复制

到项目中使用，日常开发、功能迭代都能直接落地。

二、核心原理

• CSS3animation + @keyframes实现无限往返动画

• opacity：明暗呼吸效果

• transform: scale()：大小起伏呼吸效果

• box-shadow：外发光呼吸效果

• box-shadow inset：向内发光呼吸（稀缺高级效果）

• animation-play-state：JS 动态启停动画，性能优异

三、呼吸灯完整示例演示

为方便大家直观预览所有效果，本节先提供全效果合集演示组件，一次性查看7种呼吸灯运行效果；后续逐一拆分独立单文件组件，最后提供通用可复用抽离组件 + 父组件标准调用示例，满足预览、学习、项目复用三种需求。

1、全效果合集演示（统一预览所有样式）

新建文件：BreathLightAll.vue，该组件集成所有呼吸灯效果，仅用于本地预览调试、效果对比。

<template> <div class="demo-container"> <h2 class="title">Vue3 全套呼吸灯效果合集</h2> <!-- 1. 基础透明度呼吸灯 --> <div class="item"> <div class="light-opacity"></div> <span>1. 透明度呼吸</span> </div> <!-- 2. 外发光光晕呼吸灯（业务最常用） --> <div class="item"> <div class="light-outer"></div> <span>2. 外发光光晕呼吸</span> </div> <!-- 3. 缩放起伏呼吸灯 --> <div class="item"> <div class="light-scale"></div> <span>3. 缩放起伏呼吸</span> </div> <!-- 4. 文字呼吸灯 --> <div class="item"> <span class="light-text">4. 文字加载呼吸效果</span> </div> <!-- 5. 边框呼吸灯 --> <div class="item"> <div class="light-border">5. 边框呼吸模块</div> </div> <!-- 6. 向内呼吸灯（内发光样式，高视觉反差） --> <div class="item"> <div class="light-inner"></div> <span>6. 向内内发光呼吸</span> </div> <!-- 7. TS 可控开关呼吸灯 --> <div class="item"> <div class="light-control" :class="{ pause: !lightActive }"></div> <span>7. 可控呼吸灯</span> <button @click="lightActive = !lightActive">切换状态</button> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue' // 定义呼吸灯启停状态，TS 布尔类型约束 const lightActive = ref<boolean>(true) </script> <style scoped> /* 页面演示容器样式 */ .demo-container { width: 100%; padding: 60px; background: #0b1322; box-sizing: border-box; } .title { color: #fff; margin-bottom: 40px; font-size: 22px; } .item { display: flex; align-items: center; margin-bottom: 36px; gap: 20px; color: #fff; font-size: 14px; } button { padding: 5px 12px; border-radius: 4px; border: none; background: #409eff; color: #fff; cursor: pointer; } /* 1. 基础透明度呼吸：仅通过透明度明暗变化实现呼吸效果 */ .light-opacity { width: 30px; height: 30px; border-radius: 50%; background: #409eff; animation: opacityBreath 2s ease-in-out infinite alternate; } @keyframes opacityBreath { 0% { opacity: 0.2; } 100% { opacity: 1; } } /* 2. 外发光光晕呼吸：向外扩散光晕，常用于设备正常状态指示灯 */ .light-outer { width: 30px; height: 30px; border-radius: 50%; background: #00b42a; animation: outerBreath 2s ease-in-out infinite alternate; } @keyframes outerBreath { 0% { box-shadow: 0 0 4px 2px rgba(0, 180, 42, 0.2); } 100% { box-shadow: 0 0 20px 8px rgba(0, 180, 42, 0.7); } } /* 3. 缩放起伏呼吸：结合尺寸缩放+透明度，模拟立体起伏呼吸效果 */ .light-scale { width: 30px; height: 30px; border-radius: 50%; background: #ff7d00; animation: scaleBreath 2s ease-in-out infinite alternate; } @keyframes scaleBreath { 0% { transform: scale(0.9); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } } /* 4. 文字呼吸：文字透明度明暗渐变，适用于加载提示文本 */ .light-text { font-size: 18px; color: #ffe500; animation: textBreath 2s ease-in-out infinite alternate; } @keyframes textBreath { 0% { opacity: 0.3; } 100% { opacity: 1; } } /* 5. 边框呼吸：仅边框颜色透明度变化，实现模块高亮呼吸效果 */ .light-border { padding: 10px 20px; border: 2px solid #722ed1; border-radius: 6px; animation: borderBreath 2s ease-in-out infinite alternate; } @keyframes borderBreath { 0% { border-color: rgba(114, 46, 209, 0.2); } 100% { border-color: rgba(114, 46, 209, 1); } } /* 6. 向内呼吸灯：inset 内阴影发光 + 微缩放 + 透明度变化，视觉层次更高级 */ .light-inner { width: 30px; height: 30px; border-radius: 50%; background: #13c2c2; /* 开启硬件加速，优化动画流畅度 */ will-change: transform, box-shadow; animation: innerBreath 2s ease-in-out infinite alternate; } @keyframes innerBreath { 0% { /* 暗态：弱化内发光，轻微收缩 */ box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.05); transform: scale(0.92); opacity: 0.7; } 100% { /* 亮态：强化内发光，恢复原始尺寸 */ box-shadow: inset 0 0 22px 10px rgba(255, 255, 255, 0.9); transform: scale(1); opacity: 1; } } /* 7. 可控呼吸灯：支持JS动态启停，适用于告警、状态切换场景 */ .light-control { width: 30px; height: 30px; border-radius: 50%; background: #f53f3f; animation: controlBreath 1.5s ease-in-out infinite alternate; } /* 动画暂停类，配合状态开关使用 */ .pause { animation-play-state: paused; opacity: 0.2; } @keyframes controlBreath { 0% { box-shadow: 0 0 6px 2px rgba(245, 63, 63, 0.2); } 100% { box-shadow: 0 0 24px 8px rgba(245, 63, 63, 0.8); } } </style>

2、七种独立单文件组件（按需单独使用）

下面将7种呼吸灯效果完全拆分为独立单文件组件，所有示例互不依赖、无需二次改造，代码注释完整、样式隔离，大家可以根据实际业务场景单独复制取用。

1）基础透明度呼吸灯

仅通过透明度明暗交替实现简约呼吸效果，适合轻量加载、弱提示场景。

<template> <div class="breath-opacity"></div> </template> <script setup lang="ts"></script> <style scoped> .breath-opacity { width: 30px; height: 30px; border-radius: 50%; background: #409eff; /* 无限往返呼吸动画，节奏柔和自然 */ animation: opacityBreath 2s ease-in-out infinite alternate; } /** * 透明度明暗呼吸动画 * 低透明度弱化、高透明度提亮，实现简约呼吸效果 */ @keyframes opacityBreath { 0% { opacity: 0.2; } 100% { opacity: 1; } } </style>

2）外发光光晕呼吸灯（业务高频常用）

阴影向外扩散形成光晕，视觉通透醒目，普遍用于设备在线、正常状态指示灯。

<template> <div class="breath-outer"></div> </template> <script setup lang="ts"></script> <style scoped> .breath-outer { width: 30px; height: 30px; border-radius: 50%; background: #00b42a; animation: outerBreath 2s ease-in-out infinite alternate; } /** * 外发光光晕呼吸动画 * 光晕由弱到强向外扩散，适配设备正常在线状态展示 */ @keyframes outerBreath { 0% { box-shadow: 0 0 4px 2px rgba(0, 180, 42, 0.2); } 100% { box-shadow: 0 0 20px 8px rgba(0, 180, 42, 0.7); } } </style>

3）缩放起伏呼吸灯

结合尺寸缩放与透明度变化，具备立体起伏质感，适合大屏可视化、重点状态展示场景。

<template> <div class="breath-scale"></div> </template> <script setup lang="ts"></script> <style scoped> .breath-scale { width: 30px; height: 30px; border-radius: 50%; background: #ff7d00; animation: scaleBreath 2s ease-in-out infinite alternate; } /** * 缩放起伏呼吸动画 * 轻微收缩弱化、还原尺寸提亮，模拟立体起伏呼吸效果 */ @keyframes scaleBreath { 0% { transform: scale(0.9); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } } </style>

4）文字呼吸灯

文字透明度明暗渐变，多用于页面加载、接口请求、等待提示文本，轻量化无性能损耗。

<template> <span class="breath-text">加载中，请稍候...</span> </template> <script setup lang="ts"></script> <style scoped> .breath-text { font-size: 18px; color: #ffe500; animation: textBreath 2s ease-in-out infinite alternate; } /** * 文字明暗呼吸动画 * 适配各类加载、等待、请求提示文本 */ @keyframes textBreath { 0% { opacity: 0.3; } 100% { opacity: 1; } } </style>

5）边框呼吸灯

仅边框颜色透明度动态变化，不改变布局，适合模块高亮、弹窗聚焦、重点区域提示。

<template> <div class="breath-border">重点提示模块</div> </template> <script setup lang="ts"></script> <style scoped> .breath-border { padding: 10px 20px; border: 2px solid #722ed1; border-radius: 6px; animation: borderBreath 2s ease-in-out infinite alternate; } /** * 边框呼吸动画 * 边框由浅到深渐变，实现模块高亮呼吸效果 */ @keyframes borderBreath { 0% { border-color: rgba(114, 46, 209, 0.2); } 100% { border-color: rgba(114, 46, 209, 1); } } </style>

6）向内呼吸灯

采用 inset 内阴影 + 微缩放 + 透明度组合动画，质感内敛高级，适配精致UI展示场景。

<template> <div class="breath-inner"></div> </template> <script setup lang="ts"></script> <style scoped> .breath-inner { width: 30px; height: 30px; border-radius: 50%; background: #13c2c2; /* 开启硬件加速，提升动画流畅度 */ will-change: transform, box-shadow; animation: innerBreath 2s ease-in-out infinite alternate; } /** * 向内呼吸动画 * 内阴影发光搭配微缩放起伏，视觉层次丰富、效果醒目 */ @keyframes innerBreath { 0% { /* 暗态：轻微收缩、弱化内发光 */ box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.05); transform: scale(0.92); opacity: 0.7; } 100% { /* 亮态：恢复尺寸、强化内发光 */ box-shadow: inset 0 0 22px 10px rgba(255, 255, 255, 0.9); transform: scale(1); opacity: 1; } } </style>

7）可控开关呼吸灯

支持动态开关动画状态，结合TS类型约束控制启停，适配设备告警、状态切换、功能开关等动态动画控制场景。

<template> <div class="breath-control" :class="{ pause: !lightActive }"></div> <button class="btn" @click="lightActive = !lightActive">切换呼吸状态</button> </template> <script setup lang="ts"> import { ref } from 'vue' // TS 约束布尔状态，精准控制动画启停 const lightActive = ref<boolean>(true) </script> <style scoped> .breath-control { width: 30px; height: 30px; border-radius: 50%; background: #f53f3f; /* 短节奏动画，适配告警提示场景 */ animation: controlBreath 1.5s ease-in-out infinite alternate; } .btn { margin-top: 12px; padding: 5px 12px; border: none; border-radius: 4px; background: #409eff; color: #fff; cursor: pointer; } /* 动画暂停置灰样式 */ .pause { animation-play-state: paused; opacity: 0.2; } /** * 可控呼吸灯动画 * 红色光晕强弱交替，适配告警、异常状态提示 */ @keyframes controlBreath { 0% { box-shadow: 0 0 6px 2px rgba(245, 63, 63, 0.2); } 100% { box-shadow: 0 0 24px 8px rgba(245, 63, 63, 0.8); } } </style>

3、通用可复用呼吸灯组件（项目业务封装）

日常项目开发中，编写零散的动画代码冗余度高，还会导致项目UI风格不统一。因此本文封装了一款支持TS类型校验、自定义颜色、内外发光切换、动态启停的通用呼吸灯组件，可全局复用，适配企业级项目开发。

1）公共组件文件新建：BreathLight.vue，完整可运行代码如下：

<template> <!-- 通过类名动态切换发光模式与动画状态 --> <div class="breath-light" :class="{ pause: !active, inner: isInner }"></div> </template> <script setup lang="ts"> /** * 通用可复用呼吸灯公共组件 * @param active 是否开启动画 * @param isInner 是否为向内发光模式，默认向外发光 * @param color 呼吸灯主体背景色 */ interface Props { active?: boolean isInner?: boolean color?: string } // 接收传值并配置默认参数，提升组件容错性 const props = defineProps<Props>() const { active = true, isInner = false, color = '#409eff' } = props </script> <style scoped> .breath-light { width: 28px; height: 28px; border-radius: 50%; /* 绑定TS自定义主题色 */ background: v-bind(color); will-change: transform, box-shadow; /* 默认启用外发光动画 */ animation: outerCommon 2s ease-in-out infinite alternate; } /* 切换向内发光动画模式 */ .breath-light.inner { animation-name: innerCommon; } /* 动画暂停状态，实现启停控制 */ .breath-light.pause { animation-play-state: paused; opacity: 0.2; } /** * 通用外发光动画 * 光晕向外扩散，适配常规设备状态指示灯 */ @keyframes outerCommon { 0% { box-shadow: 0 0 4px 2px rgba(64, 158, 255, 0.2); } 100% { box-shadow: 0 0 20px 8px rgba(64, 158, 255, 0.7); } } /** * 通用向内发光动画 * 内阴影+微缩放组合，解决原生内发光效果不明显的问题 */ @keyframes innerCommon { 0% { box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.05); transform: scale(0.92); opacity: 0.7; } 100% { box-shadow: inset 0 0 22px 10px rgba(255, 255, 255, 0.9); transform: scale(1); opacity: 1; } } </style>

2）父组件标准调用示例

将封装好的公共组件引入业务页面，可灵活实现默认样式、自定义配色、内外发光切换、动画动态启停等效果，适配绝大多数状态展示场景。

<template> <div class="wrap"> <!-- 默认蓝色外发光 --> <BreathLight /> <!-- 自定义绿色在线状态灯 --> <BreathLight color="#00b42a" /> <!-- 向内发光高级效果灯 --> <BreathLight is-inner color="#13c2c2" /> <!-- 可动态启停告警呼吸灯 --> <BreathLight :active="lightStatus" color="#f53f3f" /> <button @click="lightStatus = !lightStatus">切换状态</button> </div> </template> <script setup lang="ts"> import { ref } from 'vue' import BreathLight from './BreathLight.vue' // 控制呼吸灯启停状态 const lightStatus = ref<boolean>(true) </script>

四、核心知识点与业务场景总结

1、向外发光与向内发光核心区别

• 外发光：box-shadow: x y blur spread color，光晕向外扩散，适合常规状态指示灯，视觉醒目、兼容性强

• 内发光：box-shadow: inset x y blur spread color，光晕向内收敛，质感高级小众，不会挤压页面布局

2、动画参数释义

• ease-in-out：先慢后快再慢，贴合真实呼吸节奏，动画更自然柔和

• infinite：动画无限循环播放

• alternate：往返动画，明暗交替过渡，不会出现生硬的重置闪烁

• animation-play-state: paused：原生CSS暂停动画，无性能消耗，适配动态启停需求

3、业务场景推荐

• 设备在线/离线状态：外发光绿色呼吸灯，直观清晰

• 告警、异常状态：短节奏红色外发光呼吸，警示性强

• 卡片/模块高亮：向内呼吸灯，视觉柔和高级，不刺眼

• 页面接口加载、等待提示：文字呼吸效果，轻量化不突兀

• 大屏数据可视化：缩放+光晕组合呼吸，动态效果更丰富

五、结语

本文汇总了前端开发中主流的呼吸灯实现方式，尤其补充了少见且质感更优的向内呼吸效果。全部案例基于 Vue3 + TS + Setup 最新语法编写，无废弃 API、无冗余代码，贴合实际业务开发规范，能够直接落地到项目中使用。

欢迎关注：【前端小知识营地】