純CSS實(shí)現(xiàn)的三種通知欄滾動(dòng)效果
發(fā)布時(shí)間：2021-02-19 17:07:16 作者：橙某人 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了純CSS實(shí)現(xiàn)的三種通知欄滾動(dòng)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
前言
通知欄組件是一個(gè)比較常見的組件了，基本上每個(gè)站點(diǎn)都會(huì)有怎么個(gè)組件，主要就是通告站點(diǎn)的一些變化或者是告知一些中獎(jiǎng)名單等作用。
最近在復(fù)習(xí)CSS3動(dòng)畫部分內(nèi)容，想著平時(shí)通知欄組件大部分還是用JS來(lái)實(shí)現(xiàn)，正好拿這塊組件來(lái)當(dāng)復(fù)習(xí)，下面寫了三個(gè)小例子在此分享，歡迎大家觀看，如有疑問(wèn)，歡迎留言評(píng)論哈。
第一種
HTML部分
<div class="notice">
<div class="notice__inner">
<div class="notice__box">
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">橙某人</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">小密圈圈</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">Cooke_</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">愛(ài)音樂(lè)網(wǎng)站</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">青年之聲</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">仙人</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">三十萬(wàn)人編號(hào)</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">Maboroshii</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">陳亞明</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">老娘終于發(fā)達(dá)了</span> 中獎(jiǎng)</div>
</div>
<div class="notice__box">
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">橙某人</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">小密圈圈</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">Cooke_</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">愛(ài)音樂(lè)網(wǎng)站</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">青年之聲</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">仙人</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">三十萬(wàn)人編號(hào)</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">Maboroshii</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">陳亞明</span> 中獎(jiǎng)</div>
<div class="notice__item">恭喜會(huì)員用戶 <span style="color: red;">老娘終于發(fā)達(dá)了</span> 中獎(jiǎng)</div>
</div>
</div>
</div>
CSS部分
.notice{
width: 300px;
height: 300px;
border-radius: 8px;
border: 1px solid #eee;
margin: 100px auto;
}
.notice__inner{
width: 100%;
height: 100%;
overflow: hidden;
font-size: 14px;
color: #666;
}
.notice__box{
animation: roll 10s linear infinite;
}
.notice__item{
width: 100%;
height: 30px;
line-height: 30px;
padding: 0 12px;
white-space: nowrap;
}
@keyframes roll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-300px);
}
}
- 視口容器高度需要固定，超出視口容器隱藏內(nèi)容；
- 為了營(yíng)造出無(wú)縫滾動(dòng)回來(lái)，內(nèi)容需要準(zhǔn)備兩份，彼此緊隨；
- 通過(guò)移動(dòng)內(nèi)層translateY實(shí)現(xiàn)滾動(dòng)效果；
- 在第一份內(nèi)容完全滾出視口容器的一瞬間，立刻將內(nèi)容位置進(jìn)行復(fù)原；
- 通過(guò)infinite來(lái)循環(huán)此過(guò)程；
第二種
HTML部分
<div class="notice">
<div class="notice__inner">
<div class="notice__item">HTTP升級(jí)HTTPS全過(guò)程，Nginx配置平滑升級(jí)</div>
<div class="notice__item">一臺(tái)電腦存在多個(gè)版本的Vuecli，方便快速初始化不同版本的Vue項(xiàng)目</div>
<div class="notice__item">前端模塊化規(guī)范定義-不同規(guī)范下的導(dǎo)入導(dǎo)出</div>
<div class="notice__item">快速、簡(jiǎn)潔講明Vue中v-for循環(huán)key的作用</div>
<div class="notice__item">Call與Apply函數(shù)的分析及手寫實(shí)現(xiàn)</div>
<div class="notice__item">普通切圖仔的一年 | 掘金年度征文</div>
<div class="notice__item">前端需要了解的瀏覽器緩存（即HTTP緩存）| 🏆 技術(shù)專題第八期征文</div>
</div>
</div>
CSS部分
.notice{
width: 600px;
height: 40px;
border-radius: 8px;
border: 1px solid #eee;
margin: 100px auto;
overflow: hidden;
}
.notice__inner{
animation: roll 36s linear infinite;
margin-top: 0
}
.notice__item{
font-size: 14px;
height: 40px;
line-height: 40px;
padding: 0 12px;
white-space: nowrap;
text-decoration: underline;
}
@keyframes roll {
0% {
margin-top: 0;
}
4% {
margin-top: 0;
}
8% {
margin-top: 0;
}
12% {
margin-top: -40px;
}
16% {
margin-top: -40px;
}
20% {
margin-top: -80px;
}
24% {
margin-top: -80px;
}
28% {
margin-top: -120px;
}
32% {
margin-top: -120px;
}
36% {
margin-top: -160px;
}
40% {
margin-top: -160px;
}
44% {
margin-top: -200px;
}
48% {
margin-top: -200px;
}
52% {
margin-top: -240px;
}
56% {
margin-top: -240px;
}
60% {
margin-top: -200px;
}
64% {
margin-top: -200px;
}
68% {
margin-top: -160px;
}
72% {
margin-top: -160px;
}
76% {
margin-top: -120px;
}
80% {
margin-top: -120px;
}
84% {
margin-top: -80px;
}
88% {
margin-top: -80px;
}
92% {
margin-top: -40px;
}
96% {
margin-top: -40px;
}
100% {
margin-top: 0;
}
}
（gif錄制可能稍微短了一點(diǎn)，建議動(dòng)手試試看哦）
這種輪播的形式是比較常見的一種，也是比較實(shí)用完善簡(jiǎn)單的一種，隨便提一句在微信小程序上用swiper組件去實(shí)現(xiàn)比較簡(jiǎn)單快捷（不要問(wèn)我怎么知道的-.-）。
- 視口容器高度需要固定，超出視口容器隱藏內(nèi)容；
- 通過(guò)移動(dòng)內(nèi)層margin-top實(shí)現(xiàn)滾動(dòng)效果（用translateY也一樣，全部替換一下就行）；
- 需要注意的是，從上面HTML部分知道我有七個(gè)通知內(nèi)容，所以在@keyframes中的margin-top是移動(dòng)七次而已，之后就回走，如果添加了第八個(gè)通知內(nèi)容，我們要對(duì)應(yīng)調(diào)整其中的數(shù)值；
第三種
HTML部分
<div class="notice">
<div class="notice__inner">
<span class="notice__item notice__item-first">Vue是一個(gè)漸進(jìn)式的 JavaScript 框架</span>
<span class="notice__item notice__item-second">Vue是一個(gè)漸進(jìn)式的 JavaScript 框架</span>
</div>
</div>
CSS部分
.notice{
width: 600px;
height: 40px;
border-radius: 8px;
border: 1px solid #eee;
margin: 100px auto;
overflow: hidden;
}
.notice__inner{
height: 100%;
font-size: 14px;
color: #333;
line-height: 40px;
white-space: nowrap;
position: relative;
}
.notice__item{
position: absolute;
top: 0;
left: 100%;
height: 100%;
}
.notice__item-first{
padding-right: 70%;
animation: rollFirst 25s linear infinite;
}
.notice__item-second{
padding-right: 53%;
animation: rollSecond 25s linear 12s infinite;
}
@keyframes rollFirst {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
@keyframes rollSecond {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
這種滾動(dòng)通知欄也是比較常見的一種，它比較麻煩的一點(diǎn)就是那個(gè)空白間隔不好控制，特別在多個(gè)通知內(nèi)容的時(shí)候，當(dāng)然用JS還是比較好實(shí)現(xiàn)的，現(xiàn)在也有很插件可以直接開箱就用啦。
- 這種視口容器高度就不需要固定了，它并不依賴，超出視口容器隱藏內(nèi)容；
- 利用padding-right來(lái)制造空白間隔，以百分比為單位；
- 內(nèi)容需要準(zhǔn)備兩份，通過(guò)animation-delay來(lái)延時(shí)第二份內(nèi)容的出現(xiàn)，這里也有另一個(gè)思路就是直接來(lái)移動(dòng)內(nèi)層容器的translateX，與第一種是一樣的道理；
小結(jié)
看到這里，躍躍欲試了嗎？ 沒(méi)有？ 行吧。
單純的HTML+CSS肯定是沒(méi)有JS那么靈活，但以上例子還是很適合一些固定好文案的場(chǎng)景，也適合在開發(fā)階段快速做出交互效果。
到此這篇關(guān)于純CSS實(shí)現(xiàn)的三種通知欄滾動(dòng)效果的文章就介紹到這了,更多相關(guān)CSS通知欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css3 實(shí)現(xiàn)滾動(dòng)條美化效果的實(shí)例代碼
這篇文章主要介紹了css3 實(shí)現(xiàn)滾動(dòng)條美化效果的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-06
使用純 CSS 實(shí)現(xiàn)滾動(dòng)陰影效果
這篇文章主要介紹了使用純 CSS 實(shí)現(xiàn)滾動(dòng)陰影效果,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-04純css3實(shí)現(xiàn)橫向無(wú)限滾動(dòng)的示例代碼
這篇文章主要介紹了純css3實(shí)現(xiàn)橫向無(wú)限滾動(dòng)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-11-06
CSS3制作圓形滾動(dòng)進(jìn)度條動(dòng)畫的示例
這篇文章主要介紹了CSS3制作圓形滾動(dòng)進(jìn)度條動(dòng)畫的示例，幫助大家制作CSS3特效，美化自身網(wǎng)頁(yè)，感興趣的朋友可以了解下2020-11-05Css3實(shí)現(xiàn)無(wú)縫滾動(dòng)防抖
這篇文章主要介紹了Css3實(shí)現(xiàn)無(wú)縫滾動(dòng)防抖的方法，幫助大家解決圖片抖動(dòng)，感興趣的朋友可以了解下2020-09-14CSS實(shí)現(xiàn)隱藏滾動(dòng)條并可以滾動(dòng)內(nèi)容效果(三種方式)
今天小編給大家分享3種方法實(shí)現(xiàn)CSS隱藏滾動(dòng)條并可以滾動(dòng)內(nèi)容，我已經(jīng)在很多地方使用了非常不錯(cuò)，需要的朋友參考下吧2020-03-25
通過(guò)css動(dòng)畫實(shí)現(xiàn)一個(gè)表格滾動(dòng)輪播效果
這篇文章主要介紹了通過(guò)css動(dòng)畫實(shí)現(xiàn)一個(gè)表格滾動(dòng)輪播效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下2020-03-11css設(shè)置Overflow實(shí)現(xiàn)隱藏滾動(dòng)條的同時(shí)又可以滾動(dòng)
這篇文章主要介紹了css設(shè)置Overflow實(shí)現(xiàn)隱藏滾動(dòng)條的同時(shí)又可以滾動(dòng)的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-27
css實(shí)現(xiàn)5種滾動(dòng)吸頂實(shí)現(xiàn)方式的比較(性能升級(jí)版)
這篇文章主要介紹了css實(shí)現(xiàn)5種滾動(dòng)吸頂實(shí)現(xiàn)方式的比較(性能升級(jí)版)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2019-07-31css 給div添加滾動(dòng)并隱藏滾動(dòng)條
這篇文章主要介紹了css 給div添加滾動(dòng)并隱藏滾動(dòng)條的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-09
