簡單的純CSS跑馬燈－BUZZING

很久很久沒有接到需要在網頁上製作跑馬等的專案了（有10年以上了吧），可能是這個過去必備的功能退流行了吧～～
也可能是網路有太多的組件（外掛或是取代方式）可以使用，所以早忘了還有「跑馬燈」這種東西的存在。

不過今天倒是遇到的這個經典需求，想要用一個簡單而且單純的前端方式解決，所以就將資料記錄下來，有需要得時候可以看一下小抄本，不然有了年紀的腦袋開機還需要一段暖機時間。

<html>

<head>
<style>
/*在head區段內先設定一個marquee樣式，用class和id都沒差吧*/
.marquee {
/*行高設定*/
height: 40px;
/*隱藏多出來的文字*/
overflow: hidden;
/*隱藏多出來的行*/
position: relative;
}

/*文字外觀與動畫執行的設定*/
.marquee ul {
/*清除ul的項目點點*/
list-style-type: none;
/*動做設定：動畫名稱、要跑多久、運動模式、次數*/
animation-name: maruqee;
animation-duration:15s;
animation-timing-function: linear;
/*執行次數：infinite（無限重複）、3(指定3次)*/
animation-iteration-count:infinite;
/*給這個屬性才會有區域，不然就只有內容總長*/
position: absolute;
}

/*動畫行為的安排*/
@keyframes maruqee {
/*動作的起始位置*/
from {
left: 100%;
}
/*動作的結束位置*/
to {
left: 0;
}
}
</style>
</head>

<body>

<div class="marquee">

<ul>
       <li>2020.2.4(一)：公告事項呈現區域，無公告則隱藏</li>
   </ul>
</div>
</body>
</html>

靜態沒有套程式的頁面，那麼就直接剪下貼上吧！