HTML5公告滾動是一項非常實用的技術，可以讓網頁上的公告信息動態展示，增加用戶的視覺效果和互動性。以下是一段HTML5實現公告滾動的代碼：

<div id="scrollbox">
<ul>
<li>這是第一條公告</li>
<li>這是第二條公告</li>
<li>這是第三條公告</li>
</ul>
</div>
<style>
#scrollbox{
height: 100px; 
overflow: hidden; 
position: relative;}
#scrollbox ul{
position: absolute; 
top: 0; 
padding: 0; 
margin: 0; 
list-style: none;} 
#scrollbox li{
height: 33.3px; 
line-height: 33.3px; 
border-bottom: 1px solid #ddd;}
</style>
<script>
setInterval(function(){
$("#scrollbox ul").animate({marginTop:"-33.3px"},600,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this); 
})
},3000);
</script>

這段代碼的實現方法是首先定義一個div容器，利用overflow:hidden屬性控制顯示范圍，position:relative定位方式，然后在div中定義一個ul列表容器，利用position:absolute和top:0定位方式，設置列表項排列方式和樣式。

接下來在JavaScript中使用setInterval函數和jQuery的animate方法實現公告的滾動效果。具體實現步驟是，每隔一定時間（例如3秒）執行一次滾動動畫，將ul元素向上滾動一個li元素的高度，用appendTo方法將第一個列表項添加到列表最后一個元素后面，循環滾動。

這段代碼的優點是簡單易懂，易于修改和擴展，兼容性也比較好。不過缺點是沒有考慮用戶的交互行為，如果用戶希望停止滾動、查看某一條公告，需要添加相應的事件處理代碼。