CSS3為網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)了很多新的特性，其中之一就是div滑出效果。可以通過(guò)使用CSS3的transition屬性來(lái)實(shí)現(xiàn)這一效果。

/* 添加樣式 */
.slideDiv {
width: 200px;
height: 200px;
background-color: #ccc;
position: absolute;
top: -200px; /* 使div初始時(shí)不可見(jiàn) */
left: 50%; /* 橫向居中 */
transform: translateX(-50%); /* 再次居中 */
transition: top 0.5s ease-in-out; /* 添加過(guò)渡效果 */
}
.slideDiv-show {
top: 0; /* 利用class切換top值來(lái)展示div */
}

代碼中，首先定義了一個(gè)具有基本樣式的div，它的top值為負(fù)數(shù)，使得初始狀態(tài)下不可見(jiàn)。然后通過(guò)添加.slideDiv-show這個(gè)類來(lái)切換div的顯示狀態(tài)，其top值被設(shè)為0，div便從頂部滑出。

通過(guò)JavaScript或者jQuery等操作，我們可以很方便地添加或移除.slideDiv-show這個(gè)類，從而實(shí)現(xiàn)div的滑出和隱藏。