CSS 是前端開(kāi)發(fā)中非常重要的一種技術(shù)，它可以使用樣式來(lái)對(duì) HTML 版面進(jìn)行美化和布局。其中實(shí)現(xiàn)元素的滑入滑出是一種很有用的效果，可以讓網(wǎng)頁(yè)更加生動(dòng)。

/* CSS代碼實(shí)現(xiàn)div滑入滑出效果*/
.box{
/* 此處預(yù)設(shè)隱藏 */
display:none;
width: 200px;
height: 200px;
background-color: #ccc;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* transition屬性實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡 */
transition: all 0.5s ease-in-out;
}
.parent:hover .box {
/* 鼠標(biāo)移上去后將box div 顯示 */
display: block;
/* 平移 50px ，半透明度設(shè)置為 1*/
transform: translate(-50%, -70%) scale(1);
opacity: 1; 
}

上面的代碼實(shí)現(xiàn)了一個(gè)父元素hover后子元素出現(xiàn)的效果，其中包含了transition屬性來(lái)實(shí)現(xiàn)動(dòng)畫(huà)過(guò)渡的效果。這個(gè)代碼可以用在廣告彈窗上，可以讓我們的廣告更出色，更誘惑。