HTML5 滾動公告代碼
滾動公告是現代網站必不可少的功能，在HTML5中，我們可以通過輕松的實現自定義的滾動公告特效。下面是一段基本的HTML5滾動公告代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>滾動公告</title>
<style>
#notice{
width: 500px;
height: 50px;
background-color: #f0f0f0;
overflow: hidden;
}
#notice p{
margin: 0;
padding: 10px;
line-height: 30px;
height: 30px;
}
#notice p:nth-child(odd){
background-color: #fff;
}
#notice p:nth-child(even){
background-color: #ccc;
}
#notice .move{
animation: move 10s linear infinite;
}
@keyframes move{
0%{
transform: translateY(0);
}
100%{
transform: translateY(-50px);
}
}
</style>
</head>
<body>
<div id="notice">
<p>第一條滾動公告</p>
<p>第二條滾動公告</p>
<p>第三條滾動公告</p>
<p>第四條滾動公告</p>
<p>第五條滾動公告</p>
</div>
<script>
// JavaScript代碼可以用來動態更新公告內容
</script>
</body>
</html>在這段代碼中我們使用了CSS3的動畫特性來制作滾動效果。首先我們定義了notice元素的基本樣式，并將其高度設置為50px，并將overflow屬性設置為hidden，這是為了將超出元素高度的內容隱藏。接著我們設置p元素的樣式，使它們具有基本的行高和高度等基礎屬性，我們還使用nth-child偽類來為奇數和偶數個p元素設置不同的顏色，從而增加公告的可讀性和美觀性。接下來，我們定義了名為move的CSS動畫，來實現公告的滾動。我們使用translateY屬性來實現垂直方向的移動，并通過keyframes來定義動畫的具體細節：在0%到100%的過程中，我們使元素逐漸向上（負方向）移動50px的距離，完成整個滾動過程。最后，我們使用JavaScript來動態更新公告的內容，這樣我們的公告就可以根據實際需要動態變化了。