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

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

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

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