一、背景
業務需求：在網站頭部的logo和用戶登錄狀態中間，滾動播報後臺設置的通知內容。
二、css實現
效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GBK">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3_MARQUEE</title>
<style>
*{margin: 0;padding: 0;}
.wrap{height: 80px;width: 100%;background: cadetblue;display: flex;}
.wrap div{font-family: "arial, helvetica, sans-serif";line-height: 80px;color: #fff;}
.wrap .logo{font-size: 25px;font-weight: 600;float: left;padding: 0 20px 0 50px;}
.date{width: 20%;float: right;box-sizing: border-box;padding: 0 20px;}
.notice{
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
.marquee{
white-space: nowrap;
box-sizing: border-box;
position: absolute;
animation: marquee 50s linear infinite;
}
.marquee:hover {
animation-play-state: paused
}
/* Make it move */
@keyframes marquee {
0% { text-indent: 0% }
100% { text-indent: -100% }
}
</style>
</head>
<body>
<div class="wrap">
<div class="logo">logo</div>
<div class="notice">
<p class="marquee">重要通知：<a>請點擊鏈接下載最新安裝包！<a/>    公告：關於XXXX的通知，請廣而告之！    重要通知：<a>請點擊鏈接下載最新安裝包！<a/>    公告：關於XXXX的通知，請廣而告之！    重要通知：<a>請點擊鏈接下載最新安裝包！<a/>    公告：關於XXXX的通知，請廣而告之！    重要通知：<a>請點擊鏈接下載最新安裝包！<a/>    公告：關於XXXX的通知，請廣而告之！    </p>
</div>
<div class="date">2019/7/30 12:28:28</div>
</div>
</body>
</html>
缺點
- animation屬性不支持 ie9及之前的版本；
- 通報內容長度不同的話，不能以固定的速度來移動。
優點
- 純CSS實現，實現簡單。
- 可配置滾動方向和速度
核心詳解
- animation屬性
此屬性是動畫屬性，animation是屬性的簡寫，它包括6個屬性，分別是animation-name(規定需要綁定到選擇器的 keyframe 名稱)、animation-duration(規定完成動畫所花費的時間，以秒或毫秒計)、animation-timing-function(規定動畫的速度曲線)、animation-delay(規定在動畫開始之前的延遲)、animation-iteration-count(規定動畫應該播放的次數)、animation-direction(規定是否應該輪流反向播放動畫)。
- animation語法
animation: name duration timing-function delay iteration-count direction;
- @keyframes
通過 @keyframes 規則，您能夠創建動畫。創建動畫的原理是，將一套 CSS 樣式逐漸變化爲另一套樣式。在動畫過程中，可以多次改變這套 CSS 樣式。以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。0% 是動畫的開始時間，100% 動畫的結束時間。爲了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
- @keyframes語法
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
三、marquee標籤實現
效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GBK">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3_MARQUEE</title>
<style>
*{margin: 0;padding: 0;}
.wrap{height: 80px;width: 100%;background: cadetblue;display: flex;}
.wrap div{font-family: "arial, helvetica, sans-serif";line-height: 80px;color: #fff;}
.wrap .logo{font-size: 25px;font-weight: 600;float: left;padding: 0 20px 0 50px;}
.date{width: 20%;float: right;box-sizing: border-box;padding: 0 20px;}
.notice{
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
</style>
</head>
<body>
<div class="wrap">
<div class="logo">logo</div>
<div class="notice">
<marquee behavior='scroll' scrollamount='4' οnmοuseοut='this.start()' οnmοuseοver='this.stop()'>【通知】關於中秋放假通知，具體鏈接請點擊這裏！ 【通報】關於公司室內禁菸通報！！！</marquee>
</div>
<div class="date">2019/7/30 12:28:28</div>
</div>
</body>
</html>
缺點
- marquee 標籤是HTML中的廢棄標籤，不建議使用！
優點
- 支持絕大數瀏覽器。
- 不管文本大小可以以固定速度移動元素，實現效果。
- 使用起來更簡單。
核心詳解
- marquee標籤
| 屬性 | 作用 | 參數 | 示例 |
|---|---|---|---|
| direction | 滾動的方向 |
up:向上 down:向下 left:向左 right:向右 |
<marquee direction="left">...</marquee> |
| behavior | 滾動的方式 |
scroll:循環滾動 slide:只滾動一次就停止 alternate:來回交替滾動 如果未指定值，默認值爲 |
<marquee behavior="scroll">...</marquee> |
| scrollamount | 滾動的速度 | 設置每次滾動時移動的長度，以像素爲單位；如果沒有它，默認爲6 | <marquee scrollamount="5">...</marquee> |
| scrolldelay | 滾動延遲 | 設置滾動的時間間隔，單位是毫秒，通常scrolldelay是不需要設置的 | <marquee scrolldelay="100">...</marquee> |
| loop | 滾動循環次數 | 默認值是-1，滾動會不斷的循環下去 | <marquee loop="2">...</marquee> |
| 事件 | 作用 | 參數 | 示例 |
|---|---|---|---|
| onmouseout() | 設置鼠標移出改區域時繼續滾動。 | <marquee οnmοuseοut='this.start()'>...</marquee> | |
| onmouseover() | 設置鼠標移入改區域時停止滾動。 | <marquee οnmοuseοver='this.stop()'>...</marquee> | |
onbounce |
當 marquee 滾動到結尾時觸發。它只能在 behavior 屬性設置爲 alternate 時觸發 | ||
onfinish |
當 marquee 完成 loop 屬性設置的值時觸發。它只能在 loop 屬性設置爲大於 0 的某個數字時觸發。 | ||
onstart |
當 marquee 開始滾動時觸發。 |
- 注意
marquee元素中的內容如果出現換行的情況，會導致效果無法實現，可以使用js或jq將內容填充到上層元素內，如：$(".notice").html("<marquee behavior='scroll' scrollamount='4' οnmοuseοut='this.start()' οnmοuseοver='this.stop()'>"+內容+"</marquee>")