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

程序员文章站 2022-05-09 08:57:24

前言通知栏组件是一个比较常见的组件了，基本上每个站点都会有怎么个组件，主要就是通告站点的一些变化或者是告知一些中奖名单等作用。最近在复习css3动画部分内容，想着平时通知栏组件大部分还是用js来实现，...

前言

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

第一种

html部分

<div class="notice">
    <div class="notice__inner">
        <div class="notice__box">
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">橙某人</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">小密圈圈</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">cooke_</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">爱音乐网站</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">青年之声</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">仙人</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">三十万人编号</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">maboroshii</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">陈亚明</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">老娘终于发达了</span>&nbsp;中奖</div>
        </div>
        <div class="notice__box">
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">橙某人</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">小密圈圈</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">cooke_</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">爱音乐网站</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">青年之声</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">仙人</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">三十万人编号</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">maboroshii</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">陈亚明</span>&nbsp;中奖</div>
            <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">老娘终于发达了</span>&nbsp;中奖</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);
    }
}

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

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

第二种

html部分

<div class="notice">
    <div class="notice__inner">
        <div class="notice__item">http升级https全过程，nginx配置平滑升级</div>
        <div class="notice__item">一台电脑存在多个版本的vuecli，方便快速初始化不同版本的vue项目</div>
        <div class="notice__item">前端模块化规范定义-不同规范下的导入导出</div>
        <div class="notice__item">快速、简洁讲明vue中v-for循环key的作用</div>
        <div class="notice__item">call与apply函数的分析及手写实现</div>
        <div class="notice__item">普通切图仔的一年 | 掘金年度征文</div>
        <div class="notice__item">前端需要了解的浏览器缓存（即http缓存）| ???? 技术专题第八期征文</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录制可能稍微短了一点，建议动手试试看哦）

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

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

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

第三种

html部分

<div class="notice">
    <div class="notice__inner">
        <span class="notice__item notice__item-first">vue是一个渐进式的 javascript 框架</span>
        <span class="notice__item notice__item-second">vue是一个渐进式的 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%);
    }
}

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

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

小结

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

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

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

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

前言

第一种

第二种

第三种

小结

纯CSS实现的大小渐变、渐远效果

纯CSS和jQuery实现的在页面顶部显示的进度条效果2例（仿手机浏览器进度条效果）

纯CSS实现菜单、导航栏的3D翻转动画效果

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

纯CSS3实现给头像加个光芒四射且旋转的背景动画效果

纯CSS3实现滚动的齿轮动画效果

使用CSS3来实现滚动视差效果的教程

纯CSS3实现移动端展开和收起效果的示例代码

纯CSS3实现的8种Loading动画效果

纯css3实现鼠标经过图片显示描述的动画效果