CSS 上下滾動的公告是網站常用的一個特效，可以方便地向用戶展示一些重要的公告或通知消息。

實現該效果的方式有很多，下面我介紹一種使用 CSS3 動畫實現的方法。

/* 定義通知容器樣式 */
.notice-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
/* 定義通知樣式 */
.notice {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
line-height: 50px;
padding: 0 20px;
background-color: #fff;
color: #333;
animation-name: scrollUp;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
/* 定義動畫 */
@keyframes scrollUp {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}

上面的代碼中，我們首先定義了一個容器，它的高度為可視窗口的高度，并設置了 overflow: hidden 屬性，以隱藏通知容器外部的內容。然后我們定義了通知樣式，設置了高度、背景色、文本顏色等屬性，并通過 animation-name 屬性引入了動畫 keyframes。

最后，在 @keyframes 中定義了一個 scrollUp 的動畫，它的初始狀態是 translateY(0)，表示通知不偏移；結束狀態是 translateY(-100%)，表示通知偏移至頂部。我們通過設置 animation-duration、animation-iteration-count 和 animation-timing-function 等屬性，來控制動畫的時長、次數和速度等。

以上代碼是實現 CSS 上下滾動的公告的基本內容，你可以根據自己的需求進行相應的調整和改進。