一、什麼是呼吸燈動畫效果
呼吸燈動畫效果是一種常見的UI動效，類似於生物的呼吸一般，頁面元素會呼吸般地緩慢變大-變小，從而給人以生動感和動態感，增強頁面的視覺效果和用戶體驗。
呼吸燈動畫通常應用於按鈕、標籤、卡片等固定的頁面元素，用於強調和提示這些元素的交互性或可用性。在呼吸燈動畫的實現中，通常使用CSS3動畫或JavaScript動畫等技術，下面將分別介紹這兩種方式的實現方法。
二、CSS3動畫實現呼吸燈效果
使用CSS3動畫實現呼吸燈效果，主要是利用CSS3的@keyframes關鍵字定義一組動畫，並將其應用到元素上。
.demo {
animation: breath 2s ease-in-out infinite alternate;
}
@keyframes breath {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
在上面的代碼中，我們定義了名為breath的動畫，該動畫實現了CSS3呼吸燈效果，縮放比例從1到1.1。我們使用animation屬性將該動畫應用到.demo元素上，並設置其循環播放（infinite）和來回交替播放（alternate）。
三、JavaScript動畫實現呼吸燈效果
使用JavaScript實現呼吸燈效果，通常是通過setInterval或requestAnimationFrame等函數實現定時重繪頁面元素，從而實現動畫效果。
let element = document.querySelector('.demo');
let scale = 1;
setInterval(function() {
element.style.transform = 'scale(' + scale + ')';
scale = scale === 1 ? 1.1 : 1;
}, 2000);
在上面代碼中，我們使用setInterval函數每隔2秒重繪一次.demo元素，從而實現呼吸燈效果。我們通過修改元素的transform屬性來改變其大小。
需要注意的是，使用JS實現呼吸燈效果需要手動處理很多細節問題，如性能優化、動畫流暢度等等，相對而言，使用CSS3動畫更簡單、效率更高，建議優先使用CSS3動畫實現呼吸燈效果。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/309551.html
微信掃一掃 
支付寶掃一掃 