CSS可以讓網頁元素動起來,其中有一種效果就是元素進入頁面的動畫效果。這種效果可以幫助網頁更具有視覺效果,使得用戶更容易吸引注意。
/*CSS代碼*/ .move-in { animation: move-in 1s ease-in-out; /*名稱move-in可以自定義,時間和動畫曲線也可以更改*/ } @keyframes move-in { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
上述代碼使用了CSS3的動畫效果,并定義了元素進入頁面的動畫效果。其中通過定義一個名為.move-in的類,然后通過animation屬性指定了動畫的時間和動畫的曲線。接下來通過keyframes關鍵字定義動畫的關鍵幀,從0%的時候元素在視窗的左邊緣,透明度為0,到100%的時候元素已經在視窗內,透明度為1。
使用以上代碼可以讓網頁元素在進入頁面的時候有一個順暢的動畫效果,提高用戶訪問體驗。