CSS實現消息飛入效果

CSS是網頁前端開發中最常用的技術之一，可以用來控制網頁的樣式和布局。消息飛入效果是網頁中常用的動態效果，讓用戶更容易注意到網頁上的重要信息。下面我們就來看看如何使用CSS實現一個簡單的消息飛入效果。

//HTML代碼
<div class="message">
<p>這是一條重要消息！</p>
</div>
//CSS代碼
.message {
position: fixed;
top: -100%;
left: 50%;
transform: translateX(-50%);
background-color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
animation: message-fly-in 1s forwards;
}
@keyframes message-fly-in {
from {
top: -100%;
}
to {
top: 50%;
}
}

上面的代碼中，我們先在HTML中創建了一個class為message的div元素，并在其中添加了一段文本作為重要消息。接下來，在CSS中，我們給這個div設置了position: fixed，top: -100%和left: 50%，使其在網頁居中上方位置出現（可以根據實際需求自行調整）。然后，我們使用transform屬性將其水平居中，同時給它添加了圓角和陰影效果。

最后，我們通過animation屬性添加了一個名為message-fly-in的關鍵幀動畫，并在樣式規則中定義了這個動畫的具體效果。在這個動畫中，我們讓消息從上方飛入，從top: -100%到top: 50%，持續1秒鐘，并且最終的效果通過forwards關鍵字保持不變。

現在，當我們打開網頁時，這個重要消息就會以動態的方式從上方飛入，吸引用戶的注意力。這就是使用CSS實現消息飛入效果的簡單示例。