CSS引導(dǎo)頁(yè)動(dòng)畫效果讓網(wǎng)站更具動(dòng)感、生動(dòng)，可以吸引用戶的注意力，提高用戶體驗(yàn)。以下是一些常見的CSS引導(dǎo)頁(yè)動(dòng)畫效果。

/* 漸變過(guò)渡 */
 .fade-in {
opacity: 0;
animation: fadeIn ease-in 1s forwards;
 }
 @keyframes fadeIn{
 0% {
opacity: 0;
 }
 100% {
opacity: 1;
 }
 }
/* 滑動(dòng)效果 */
 .slide-in-left {
transform: translateX(-100%);
animation: slideInLeft ease-in 1s forwards;
 }
 @keyframes slideInLeft {
 0% {
transform: translateX(-100%);
 }
 100% {
transform: translateX(0%);
 }
 }
/* 縮放效果 */
 .zoom-in {
transform: scale(0);
animation: zoomIn 0.5s forwards;
 }
 @keyframes zoomIn {
 0% {
transform: scale(0);
 }
 100% {
transform: scale(1);
 }
 }

以上CSS效果都可以使用在引導(dǎo)頁(yè)的標(biāo)題、圖片、按鈕等元素上，用于吸引用戶的眼球，提高用戶的參與度。