CSS動(dòng)畫可以為網(wǎng)站增添活力，其中文字飛進(jìn)來的效果也很受歡迎。下面我們來學(xué)習(xí)一下如何使用CSS動(dòng)畫制作這樣的效果。

/* HTML結(jié)構(gòu) */
<h1>Hello World!</h1>
/* CSS樣式 */
h1 {
opacity: 0; /*文本元素先隱藏，等待動(dòng)畫執(zhí)行*/
animation: fly-in 1s ease-out forwards; /*使用CSS動(dòng)畫，動(dòng)畫執(zhí)行時(shí)間為1秒，緩動(dòng)方式為ease-out，后續(xù)保持動(dòng)畫結(jié)束后的狀態(tài)*/
}
/* CSS動(dòng)畫 */
@keyframes fly-in {
from {
opacity: 0;
transform: translateX(-100%); /*從左邊飛進(jìn)來*/
}
to {
opacity: 1;
transform: translateX(0); /*飛到中間*/
}
}

通過將文本元素設(shè)置為透明度為0的隱藏狀態(tài)，然后使用CSS動(dòng)畫將文本元素從左側(cè)飛入到所在位置，完成文字飛進(jìn)來的效果。通過調(diào)整動(dòng)畫效果的時(shí)間、緩動(dòng)方式和方向等參數(shù)，可以制作出不同風(fēng)格的動(dòng)畫效果，為網(wǎng)站增添活力。