CSS中的呼吸燈效果可以讓網頁元素在指定時間內實現閃爍效果,非常適用于網頁設計中的裝飾與活動推廣等場合。下面我們來看看如何使用CSS實現這個效果。
.breath { animation: breath 2s infinite; } @keyframes breath { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }
在CSS中,我們首先創建一個名為"breath"的類,然后通過animation屬性指定我們定義的"breath"動畫效果,時間長度為2秒,無限循環。接下來我們再通過@keyframes定義動畫的各個狀態。
在0%時,元素的透明度被設置為0.2,也就是呼吸燈效果的最暗狀態;在50%時,元素的透明度被設置為1,達到最亮狀態;在100%時,元素的透明度重新回到0.2,形成循環。
通過這樣簡單的定義,我們就可以在元素應用該類之后實現呼吸燈效果了。