CSS浮現動畫是讓元素在頁面上以某種特定的方式出現或消失的一種動畫效果。通常情況下,我們會利用CSS的transition或animation屬性來實現浮現動畫效果。
/* transition實現浮現動畫 */ .box{ opacity:0; transition: all 0.5s ease-in-out; } .box.active{ opacity:1; } /* animation實現浮現動畫 */ .box{ opacity:0; animation: fadeIn 0.5s ease-in-out forwards; } @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
通過上述代碼,我們可以看到transition和animation實現浮現動畫的區別:
1. transition需要在元素狀態發生改變時才會生效,因此需要有相應的觸發事件。
2. animation則是基于時間控制,可以理解為一種自帶觸發效果的動畫方式。
不管是哪種實現方式,浮現動畫都可以為頁面增添一份動感,讓網站看起來更加生動有趣。
上一篇css 添加返回按鈕
下一篇css 清楚斜體