欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純CSS實(shí)現(xiàn)的三種通知欄滾動(dòng)效果

  發(fā)布時(shí)間：2021-02-19 17:07:16   作者：橙某人   我要評(píng)論
這篇文章主要介紹了純CSS實(shí)現(xiàn)的三種通知欄滾動(dòng)效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

通知欄組件是一個(gè)比較常見的組件了，基本上每個(gè)站點(diǎn)都會(huì)有怎么個(gè)組件，主要就是通告站點(diǎn)的一些變化或者是告知一些中獎(jiǎng)名單等作用。
最近在復(fù)習(xí)CSS3動(dòng)畫部分內(nèi)容，想著平時(shí)通知欄組件大部分還是用JS來實(shí)現(xiàn)，正好拿這塊組件來當(dāng)復(fù)習(xí)，下面寫了三個(gè)小例子在此分享，歡迎大家觀看，如有疑問，歡迎留言評(píng)論哈。

第一種

HTML部分

<div class="notice">
    <div class="notice__inner">
        <div class="notice__box">
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">橙某人</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">小密圈圈</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">Cooke_</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">愛音樂網(wǎng)站</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">青年之聲</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">仙人</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">三十萬人編號(hào)</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">Maboroshii</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">陳亞明</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">老娘終于發(fā)達(dá)了</span>&nbsp;中獎(jiǎng)</div>
        </div>
        <div class="notice__box">
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">橙某人</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">小密圈圈</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">Cooke_</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">愛音樂網(wǎng)站</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">青年之聲</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">仙人</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">三十萬人編號(hào)</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">Maboroshii</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">陳亞明</span>&nbsp;中獎(jiǎng)</div>
            <div class="notice__item">恭喜會(huì)員用戶&nbsp;<span style="color: red;">老娘終于發(fā)達(dá)了</span>&nbsp;中獎(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)容；
  • 為了營造出無縫滾動(dòng)回來，內(nèi)容需要準(zhǔn)備兩份，彼此緊隨；
  • 通過移動(dòng)內(nèi)層translateY實(shí)現(xiàn)滾動(dòng)效果；
  • 在第一份內(nèi)容完全滾出視口容器的一瞬間，立刻將內(nèi)容位置進(jìn)行復(fù)原；
  • 通過infinite來循環(huán)此過程；

第二種

HTML部分

<div class="notice">
    <div class="notice__inner">
        <div class="notice__item">HTTP升級(jí)HTTPS全過程，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">快速、簡潔講明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í)用完善簡單的一種，隨便提一句在微信小程序上用swiper組件去實(shí)現(xiàn)比較簡單快捷（不要問我怎么知道的-.-）。

  • 視口容器高度需要固定，超出視口容器隱藏內(nèi)容；
  • 通過移動(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來制造空白間隔，以百分比為單位；
  • 內(nèi)容需要準(zhǔn)備兩份，通過animation-delay來延時(shí)第二份內(nèi)容的出現(xiàn)，這里也有另一個(gè)思路就是直接來移動(dòng)內(nèi)層容器的translateX，與第一種是一樣的道理；

小結(jié)

看到這里，躍躍欲試了嗎？ 沒有？ 行吧。

單純的HTML+CSS肯定是沒有JS那么靈活，但以上例子還是很適合一些固定好文案的場景，也適合在開發(fā)階段快速做出交互效果。

到此這篇關(guān)于純CSS實(shí)現(xiàn)的三種通知欄滾動(dòng)效果的文章就介紹到這了,更多相關(guān)CSS通知欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論