CSS3有一個(gè)很棒的特性，讓元素從右邊展開，并且采用這種效果非常簡(jiǎn)單。

.slide-from-right {
position: relative;
right: -100%;
transition: right 0.5s ease-in-out;
}
.slide-from-right.visible {
right: 0;
}

上面的代碼可以創(chuàng)建一個(gè)包含.slide-from-right類的元素，這個(gè)元素向右側(cè)展開。position屬性是relative，這是因?yàn)槲覀円鄬?duì)位置的控制。初始偏移是“-100%”（也就是在頁(yè)面的最右側(cè)），過渡屬性定義了從-100%到0的右側(cè)過渡效果。如果元素可見（當(dāng)添加“visible”類名的時(shí)候），那么它就會(huì)從右側(cè)展開到頁(yè)面的左側(cè)，這就是從右邊展開。

利用CSS3的過渡效果可以很容易地創(chuàng)建一些很酷的動(dòng)畫，這可以提高用戶體驗(yàn)和頁(yè)面的交互性。下面是一個(gè)實(shí)現(xiàn)CSS3這個(gè)特性的簡(jiǎn)單例子。

<button onclick="document.getElementById('box').classList.toggle('visible')">從右側(cè)展開</button>
<div id="box" class="slide-from-right">
<p>這里寫需要顯示的內(nèi)容。</p>
</div>

我們可以給一個(gè)按鈕什么的添加一個(gè)單擊事件，這個(gè)事件可以觸發(fā)一個(gè)類名的添加和刪除，從而讓元素（在這個(gè)例子中是“div”元素）從右邊展開或收縮。在這個(gè)例子中，“slide-from-right”類名也被添加到元素中。

CSS3是現(xiàn)代Web設(shè)計(jì)開發(fā)的重要組成部分。通過使用CSS3的強(qiáng)大技術(shù)，我們可以更加便捷地實(shí)現(xiàn)更豐富多彩、更生動(dòng)的網(wǎng)頁(yè)，為用戶提供一種更好的體驗(yàn)。