在網(wǎng)頁設(shè)計中，動態(tài)效果是非常重要的，其中 CSS 脈沖效果是一個非常酷炫的效果。脈沖效果可以用于醒目的按鈕提示，或者突出顯示重要信息。下面我們來學習如何實現(xiàn) CSS 脈沖效果。
.btn-pulse {
animation-name: pulse;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}首先，我們定義了一個類名為 .btn-pulse。接著，在其中定義了一個名為 pulse 的動畫。這個動畫在 2 秒內(nèi)完成一次，循環(huán)次數(shù)為無限循環(huán)。
接下來，我們使用 @keyframes 規(guī)則定義了動畫過程中的關(guān)鍵幀。在第 0% 的位置上，按鈕沒有任何變化，它的樣式依舊是正常狀態(tài)。當關(guān)鍵幀進入到第 50% 的位置時，我們給按鈕設(shè)定了一個放大的效果，它的大小會增加到 1.2 倍。最后，當關(guān)鍵幀到達 100% 的位置時，按鈕又會回歸到原來的大小。
剛剛定義好了動畫，接下來我們就要把它應用到按鈕上：
我們知道，通過給按鈕添加類名 .btn-pulse，就能夠讓按鈕產(chǎn)生脈沖效果。如果您現(xiàn)在打開網(wǎng)頁，應該就能看到這個效果了。
CSS 脈沖效果的實現(xiàn)其實非常簡單，只需要使用 CSS3 的 animation 屬性，結(jié)合 @keyframes 規(guī)則，就可以輕松地實現(xiàn)這個效果。
上一篇mysql如何讓列值唯一
下一篇css脫離屬性有哪些