当清晨的阳光悄悄爬上窗台，窗外的鸟鸣声清脆悦耳，泡一杯清香四溢的茶，坐在舒适的角落。前端的小伙伴们，别让面试的压力扰乱了这份宁静，不如趁着这悠然的清晨和上午时光，跟着我一起拆解一道 CSS 高频面试题。每天的一点点学习，就像涓涓细流，终会汇聚成知识的海洋，让你在技术的道路上稳步前行。

最近，“CSS 特效实现”“前端面试精华”“CSS 创新应用” 等话题热度不断攀升，这些都是面试官挖掘技术能力的关键考点。今天，我们就来攻克一道有趣又实用的题目 ——如何用 CSS 实现一个会呼吸的按钮效果？ 这种充满动态感的效果，不仅能为页面增添灵动气息，掌握它还能让你在面试中脱颖而出。

方法：利用 CSS 的 @keyframes 规则和 box-shadow 属性

@keyframes就像一位神奇的动画导演，能定义元素的变化过程；box-shadow则是打造光影效果的高手，二者配合，轻松实现按钮 “呼吸” 的特效。

/* 按钮基础样式 */
.breathing-button {
width: 150px;
height: 50px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
/* 初始阴影效果，让按钮有轻微立体感 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
/* 应用呼吸动画，命名为breathe，持续时间2秒，无限循环，线性过渡 */
animation: breathe 2s infinite linear;
}
/* 定义呼吸动画的关键帧 */
@keyframes breathe {
/* 动画开始和结束时的状态，阴影较小 */
0%, 100% {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
/* 动画中间状态，阴影放大，模拟呼吸扩张 */
50% {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
}

先给按钮设置好常规的尺寸、颜色和样式，box-shadow赋予它初始的立体阴影。animation属性引入名为breathe的动画，让按钮动起来。在@keyframes breathe中，定义了动画从开始到结束的变化过程：0% 和 100% 时阴影较小，50% 时阴影放大，就像人的呼吸一样，一收一放，充满韵律感。

面试回答范本

当面试官问起会呼吸的按钮效果如何实现，你可以这样回答：“我会用 CSS 的@keyframes规则和box-shadow属性来做。首先设置按钮的基础样式，用box-shadow给它一个初始阴影。然后通过@keyframes定义一个动画，在动画的关键帧里，改变box-shadow的大小和模糊程度，比如在 50% 的时候让阴影变大，模拟呼吸的扩张；在 0% 和 100% 时让阴影变小，模拟呼吸的收缩。最后用animation属性把这个动画应用到按钮上，设置好持续时间、循环次数和过渡方式，这样按钮就有了呼吸的效果。这种方法简单高效，纯 CSS 就能实现，而且兼容性也不错。”

在网页动效设计中，有人觉得纯 CSS 动画简洁轻便，也有人喜欢用 JavaScript 库实现更复杂的交互效果。你认为在实现类似会呼吸的按钮这类动效时，CSS 动画和 JavaScript 动效哪个更有优势？ 快来评论区分享你的见解，和大家一起交流讨论！如果今天的内容让你有所收获，记得点赞关注，明天清晨，我们继续相约，解锁更多 CSS 的奇妙奥秘！