CSS3中可以使用transform
屬性來(lái)實(shí)現(xiàn)div從右側(cè)滑入的效果,具體步驟如下:
1、需要?jiǎng)?chuàng)建一個(gè)div元素,并給它一個(gè)***的id,以便在CSS中定位它。
<div id="mydiv">我要從右側(cè)滑入!</div>
2、在CSS中設(shè)置div的初始位置,以及滑入時(shí)的動(dòng)畫(huà)效果。
#mydiv { position: absolute; right: 100%; animation: slidein 2s forwards; } @keyframes slidein { from { right: 100%; } to { right: 0; } }
3、在瀏覽器中打開(kāi)HTML文件,即可看到div從右側(cè)滑入的效果。
注意:上述代碼中的2s
表示動(dòng)畫(huà)持續(xù)時(shí)間為2秒,forwards
表示動(dòng)畫(huà)結(jié)束后保持結(jié)束時(shí)的樣式狀態(tài),可以根據(jù)需要調(diào)整這些參數(shù),為了確保動(dòng)畫(huà)的兼容性,建議添加瀏覽器前綴,例如-webkit
、-moz
等。