CSS 動畫是網頁設計中非常常見的元素,它可以讓網頁更加生動活潑。而從底部向上的動畫效果,可以讓元素從看不見到顯現,增加網頁的驚喜感和吸引力。
/* 定義動畫樣式 */ @keyframes slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0%); opacity: 1; } } /* 應用樣式 */ .slide-up { animation: slide-up 1s ease-out; }
上面的代碼為從底部向上的動畫效果,通過定義一個名稱為 slide-up 的動畫樣式,利用 translateY 將元素從底部向上移動,同時利用 opacity 控制元素的不透明度,實現從看不見到顯現的效果。接著,通過將 slide-up 樣式應用到具體元素的 class 上,使元素具有動畫效果。
如果想要讓元素在頁面加載時就具有動畫效果,可以通過在樣式中添加animation-delay
屬性,來延遲動畫效果的開始時間,如下所示:
.slide-up { animation: slide-up 1s ease-out; animation-delay: 0.5s; }
上面的代碼中,animation-delay
屬性值為 0.5s,代表動畫效果將延遲 0.5 秒后才開始執行。
除了從底部向上的動畫效果,CSS 還可以實現多種不同方向的動畫效果,如從上往下、從左往右、從右往左等。在實際使用中,可以根據具體需求選擇不同的動畫方向和樣式,達到更加理想的效果。
上一篇vue指定div隱藏