呼吸燈（Breathing Light）效果是一種常用于網頁設計中的效果，通過不斷交替更改顏色和透明度來讓頁面的某個元素具有漸變閃爍的效果，接下來我們就來講解一下如何使用CSS設置呼吸燈效果。

.breathing-light {
animation: breathing-light 2s ease-out infinite;
}
@keyframes breathing-light {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(2);
opacity: 0.5;  
}
100% {
transform: scale(1);
opacity: 1;
}
}

上述代碼中，我們首先定義了一個名為“breathing-light”的類名，然后使用CSS動畫屬性“animation”來綁定一個名為“breathing-light”的關鍵幀，設置時間為2秒，動畫的效果為漸出，并且設置為無限循環。

在@keyframes中，我們設置了三個關鍵幀，分別為0%、50%和100%。0%時，元素大小為原始大小，不透明度為1；50%時，元素大小為原本大小的兩倍，透明度為0.5；100%時，元素大小恢復為原始大小，透明度恢復為1。這樣就可以實現一個不斷變換大小和透明度的呼吸燈效果。

最后，我們只需要將所需元素的類名設置為“breathing-light”即可。如果需要改變呼吸燈的顏色或調整動畫的時間或速度，只需要更新CSS屬性即可。