纯CSS实现的三种通知栏滚动效果

前言

通知栏组件是一个比较常见的组件了，基本上每个站点都会有怎么个组件，主要就是通告站点的一些变化或者是告知一些中奖名单等作用。
最近在复习CSS3动画部分内容，想着平时通知栏组件大部分还是用JS来实现，正好拿这块组件来当复习，下面写了三个小例子在此分享，欢迎大家观看，如有疑问，欢迎留言评论哈。

第一种

HTML部分

    

        

            
恭喜会员用户 橙某人 中奖
            
恭喜会员用户 小密圈圈 中奖
            
恭喜会员用户 Cooke_ 中奖
            
恭喜会员用户 爱音乐网站 中奖
            
恭喜会员用户 青年之声 中奖
            
恭喜会员用户 仙人 中奖
            
恭喜会员用户 三十万人编号 中奖
            
恭喜会员用户 Maboroshii 中奖
            
恭喜会员用户 陈亚明 中奖
            
恭喜会员用户 老娘终于发达了 中奖
        
        

            
恭喜会员用户 橙某人 中奖
            
恭喜会员用户 小密圈圈 中奖
            
恭喜会员用户 Cooke_ 中奖
            
恭喜会员用户 爱音乐网站 中奖
            
恭喜会员用户 青年之声 中奖
            
恭喜会员用户 仙人 中奖
            
恭喜会员用户 三十万人编号 中奖
            
恭喜会员用户 Maboroshii 中奖
            
恭喜会员用户 陈亚明 中奖
            
恭喜会员用户 老娘终于发达了 中奖
        
    

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

• 视口容器高度需要固定，超出视口容器隐藏内容；
• 为了营造出无缝滚动回来，内容需要准备两份，彼此紧随；
• 通过移动内层translateY实现滚动效果；
• 在第一份内容完全滚出视口容器的一瞬间，立刻将内容位置进行复原；
• 通过infinite来循环此过程；

第二种

HTML部分

    

        
HTTP升级HTTPS全过程，Nginx配置平滑升级
        
一台电脑存在多个版本的Vuecli，方便快速初始化不同版本的Vue项目
        
前端模块化规范定义-不同规范下的导入导出
        
快速、简洁讲明Vue中v-for循环key的作用
        
Call与Apply函数的分析及手写实现
        
普通切图仔的一年 | 掘金年度征文
        
前端需要了解的浏览器缓存（即HTTP缓存）|  技术专题第八期征文
    

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录制可能稍微短了一点，建议动手试试看哦）

这种轮播的形式是比较常见的一种，也是比较实用完善简单的一种，随便提一句在微信小程序上用swiper组件去实现比较简单快捷（不要问我怎么知道的-.-）。

• 视口容器高度需要固定，超出视口容器隐藏内容；
• 通过移动内层margin-top实现滚动效果（用translateY也一样，全部替换一下就行）；
• 需要注意的是，从上面HTML部分知道我有七个通知内容，所以在@keyframes中的margin-top是移动七次而已，之后就回走，如果添加了第八个通知内容，我们要对应调整其中的数值；

第三种

HTML部分

    

        Vue是一个渐进式的 JavaScript 框架
        Vue是一个渐进式的 JavaScript 框架
    

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

这种滚动通知栏也是比较常见的一种，它比较麻烦的一点就是那个空白间隔不好控制，特别在多个通知内容的时候，当然用JS还是比较好实现的，现在也有很插件可以直接开箱就用啦。

• 这种视口容器高度就不需要固定了，它并不依赖，超出视口容器隐藏内容；
• 利用padding-right来制造空白间隔，以百分比为单位；
• 内容需要准备两份，通过animation-delay来延时第二份内容的出现，这里也有另一个思路就是直接来移动内层容器的translateX，与第一种是一样的道理；

小结

看到这里，跃跃欲试了吗？ 没有？ 行吧。

单纯的HTML+CSS肯定是没有JS那么灵活，但以上例子还是很适合一些固定好文案的场景，也适合在开发阶段快速做出交互效果。

到此这篇关于纯CSS实现的三种通知栏滚动效果的文章就介绍到这了,更多相关CSS通知栏内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！