CSS3是一種強(qiáng)大的樣式表語言，它可以實(shí)現(xiàn)各種花式的效果。其中，讓圖片從右到左顯示就是一種常見的效果。下面我們來看看如何使用CSS3實(shí)現(xiàn)這個(gè)效果。

img {
position: relative;
right: -100%;
animation: slide-in 1s forwards;
}
@keyframes slide-in {
100% {
right: 0%;
}
}

上面的代碼是實(shí)現(xiàn)從右到左顯示圖片的核心代碼。首先，我們將圖片的位置設(shè)置為相對(duì)定位，并且將right屬性設(shè)置為-100%。這樣就將圖片從原本的位置移動(dòng)到了屏幕的右側(cè)。

接著，我們使用CSS3的動(dòng)畫特性來實(shí)現(xiàn)圖片從右到左的滑動(dòng)效果。通過@keyframes規(guī)則定義一個(gè)名為slide-in的動(dòng)畫，將right屬性從-100%逐漸變化到0%，就能實(shí)現(xiàn)圖片從右到左的滑動(dòng)效果了。

最后，我們給動(dòng)畫加上forwards參數(shù)，使得動(dòng)畫結(jié)束后，圖片停留在最終的位置上。這樣，我們就成功地實(shí)現(xiàn)了圖片從右到左的顯示效果。