在網站制作中，為了提升用戶體驗，有時需要在網頁的狀態欄上下浮動一些信息。下面是一份HTML代碼示例，可以實現狀態欄上下浮動的效果：
<html>
<head>
<style type="text/css">
#floatBar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background-color: #ffcc00;
color: #ffffff;
font-size: 16px;
text-align: center;
line-height: 30px;
z-index: 9999;
animation: floatBar 2s infinite;
}
@keyframes floatBar {
0% {transform: translateY(0px);}
50% {transform: translateY(-10px);}
100% {transform: translateY(0px);}
}
</style>
</head>
<body>
<div id="floatBar">這是一條在狀態欄上下浮動的信息</div>
</body>
</html>以上代碼的核心是 CSS 中的position: fixed;和animation: floatBar 2s infinite;屬性：
- position: fixed;讓元素的位置固定在屏幕上，不會隨著滾動條的滾動而變化。
- animation: floatBar 2s infinite;添加了一個名為
floatBar的動畫，每次執行 2 秒鐘，循環無限次。
另外，狀態欄在頁面底部，因此需要設置bottom: 0;；同時也要設置width: 100%;，height: 30px;等屬性以控制狀態欄的大小和位置。
需要注意的是，以上代碼僅僅是一個示例，根據不同的實際需求，還需要根據自己的需求進行相應的調整，例如顏色、大小、動畫等等。