CSS可以用來創建各種各樣的特效,其中包括光波特效。
.wave { position: relative; display: inline-block; } .wave::before { content: ""; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); z-index: -1; animation: wave 1s infinite linear; } @keyframes wave { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
如上所示的代碼通過創建一個帶有動畫效果的偽元素來實現光波特效。我們通過旋轉偽元素來產生無盡循環的波動效果。
同時,我們還將其設置為具有z-index屬性的負值,以使其出現在“真正”的元素之后。
通過靈活地運用CSS的各種屬性,我們可以創造出各種各樣的特效,在結果上呈現出優美的視覺效果。
上一篇css 內部樣式怎么加
下一篇vue打包視頻講解