CSS3中最常用的效果之一就是讓頁面元素動起來,其中一個常見的效果就是讓div滑動出現。下面我們來詳細介紹如何實現這個效果。
/* HTML代碼 *//* CSS代碼 */ .slide { position: relative; left: -500px; /* 隱藏div */ animation: slideIn 1s forwards; /* 添加動畫,1秒后動畫停止 */ } @keyframes slideIn { from { left: -500px; /* 起始位置:隱藏狀態 */ } to { left: 0; /* 結束位置:滑動出現 */ } }
HTML中我們需要為要滑動出現的內容添加一個div,并為其增加一個類名slide。CSS中我們先將這個div隱藏,接著添加一個關鍵幀動畫slideIn,將div從左邊滑動出現。
在slideIn中,我們設置了起始位置為left:-500px,這將div隱藏在頁面左邊。然后,我們將結束位置設置為left:0,這將div完全滑出來。
最后,我們給動畫添加了一個屬性animation:slideIn 1s forwards。其中,1s代表動畫時長為1秒,forwards指示動畫結束后,元素應該停留在動畫結束狀態,也就是滑出到頁面中央的位置。
通過以上的CSS代碼,我們就能夠實現div滑動出現的效果了。以上僅是一個簡單的實例,在實際開發中,我們還可以根據需求適當修改CSS代碼,實現更加多樣化的滑動出現效果。
上一篇css3 div箭頭