CSS3是前端頁面設計中不可或缺的一部分。它的許多特性可以大大提高網(wǎng)頁的用戶體驗。其中，飛入飛出的效果占據(jù)了很重要的一部分，在頁面中添加這種效果可以增強頁面的動態(tài)效果，使網(wǎng)頁更加生動有趣。

以下是一個使用CSS3飛入飛出效果的例子：

HTML:
<div class="box">
<p>這是一個飛入飛出的效果</p>
</div>
CSS:
.box{
position: relative;
width: 200px;
height: 100px;
background-color: #f2f2f2;
}
.box p{
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
animation: flyIn 1s ease-out forwards,
flyOut 1s ease-in forwards 3s;
}
@keyframes flyIn{
0%{
top: -100px;
opacity: 0;
}
100%{
top: 50%;
opacity: 1;
}
}
@keyframes flyOut{
0%{
top: 50%;
opacity: 1;
}
100%{
top: 150%;
opacity: 0;
}
}

這個例子中，我們使用了CSS3的動畫特性，分別定義了兩個動畫flyIn和flyOut，分別表示文本飛入和飛出的效果。在p元素中，我們將動畫應用到元素上，并設置屬性forwards，保證動畫結(jié)束后元素保持最后的狀態(tài)。我們還使用了translateX(-50%)將p元素水平居中。

通過以上例子，我們可以看到，使用CSS3可以輕松實現(xiàn)飛入飛出的效果，極大地增強了頁面的動感，讓用戶在瀏覽網(wǎng)頁時更加愉悅！