[CSSチュートリアル】ピュアCSSで実装した通知バーの3種類のスクロール効果

<div class="notice">
    <div class="notice__inner">
        <div class="notice__box">
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">orange someone</span>&nbsp;won</ div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">little secret circle</span>&nbsp;winning< /div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">Cooke_</span>&nbsp;winning& lt;/div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">lovemusic.com</span>&nbsp;winning< ;/div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">Youth Voices</span>&nbsp;winning< /div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">Immortal</span>&nbsp;winning</ div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">three hundred thousand people number</span>&nbsp;winning& lt;/div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">Maboroshii</span>&nbsp; Winning</div>
            <div class="notice__item">Congratulations to member user&nbsp;<span style="color: red;">Chen Yaming</span>&nbsp;Winning</ div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">The old lady is finally developed</span>&nbsp;winning& lt;/div>
        </div>
        <div class="notice__box">
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">orange someone</span>&nbsp;won</ div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">little secret circle</span>&nbsp;winning< /div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">Cooke_</span>&nbsp;winning& lt;/div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">lovemusic.com</span>&nbsp;winning< ;/div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">Youth Voices</span>&nbsp;winning< /div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">Immortal</span>&nbsp;winning</ div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">three hundred thousand people number</span>&nbsp;winning& lt;/div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">Maboroshii</span>&nbsp; Winning</div>
            <div class="notice__item">Congratulations to member user&nbsp;<span style="color: red;">Chen Yaming</span>&nbsp;Winning</ div>
            <div class="notice__item">Congratulations to member users&nbsp;<span style="color: red;">The old lady is finally developed</span>&nbsp;winning& lt;/div>
        </div>
    </div>
</div>

.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);
    }
}

<div class="notice">
    <div class="notice__inner">
        <div class="notice__item"> HTTP upgrade HTTPS full process, Nginx configuration smooth upgrade</div>
        <div class="notice__item">A computer exists with multiple versions of Vuecli to facilitate quick initialization of different versions of Vue projects</div>
        <div class="notice__item">Front-end modular specification definition - import and export under different specifications</div>
        <div class="notice__item">A quick and concise explanation of the role of the v-for loop key in Vue</div>
        <div class="notice__item">Analysis and handwritten implementation of Call and Apply functions</div>
        (gif recording may be a little shorter, we recommend trying it out)
This form of rotation is more common one, but also more practical and perfect simple one, casually mentioned in the WeChat small program with swiper components to achieve a relatively simple and fast (do not ask me how to know -. (Don't ask me how I know -.).
the height of the viewport container needs to be fixed, beyond which the viewport container hides the content.
achieve scrolling effect by moving inner margin-top (same with translateY, just replace it all).
Note that I know from the HTML section above that I have seven notifications, so the margin-top in @keyframes is moved just seven times, after which it goes back, and if an eighth notification is added, we have to adjust the value of which correspondingly.
The third
HTML section
<div class="notice">
    <div class="notice__inner">
        <span class="notice__item notice__item-first"> Vue is a progressive JavaScript framework</span>
        <span class="notice__item notice__item-second">Vue is a progressive JavaScript framework</span>
    </div>
</div>



CSS section
.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%);
    }
}



This scrolling notification bar is also a relatively common one, it is more trouble is that the blank interval is not good control, especially in the case of multiple notification content, of course, with JS or better to achieve, now there are also very plug-ins can be used directly out of the box.
this viewport container height does not need to be fixed, it does not depend on, beyond the viewport container to hide the content.
using padding-right to create white space, in percentages.
the content needs to be prepared in two copies, and the appearance of the second copy is delayed by animation-delay, here is also another idea is to move the inner container directly to the translateX, the same reason as the first one.
Summary
See this and want to try it? No? Go ahead.
HTML+CSS alone is definitely not as flexible as JS, but the above example is still good for some scenarios with fixed copy, and for making quick interactions in the development phase.
This is the end of this article about the three scrolling effects of the notification bar implemented in pure CSS. For more information about the CSS notification bar, please search the previous articles of the Script House or continue to browse the following related articles, and I hope you will support the Script House more in the future!