CSS 呼吸效果是一種常見的動畫效果，它可以讓頁面元素看起來呼吸般有生命力，從而提升用戶體驗。

.element {
animation: breath 2s ease-in-out infinite;
}
@keyframes breath {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

CSS 呼吸效果的關鍵在于使用關鍵幀動畫 (keyframes)，其中定義了元素在不同時間點的狀態，最終實現呼吸式的變化效果。上面的代碼片段定義了一個名為 "breath" 的動畫，它讓元素的大小在 2 秒內從原始大小到 1.2 倍，再回到原始大小，不斷重復這個過程。

除此之外，有時候我們可能還需要使用@media查詢來控制呼吸效果的觸發條件，比如只在屏幕寬度大于一定尺寸時觸發。

@media screen and (min-width: 768px) {
.element {
animation: breath 2s ease-in-out infinite;
}
}

總之，CSS 呼吸效果是一種簡單而有效的動畫效果，可以為頁面元素增添生動感。