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

站长资源 2024/12/28 佚名

31 1538 31

DDR爱好者之家 Design By 杰米

前言

通知栏组件是一个比较常见的组件了，基本上每个站点都会有怎么个组件，主要就是通告站点的一些变化或者是告知一些中奖名单等作用。
最近在复习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);
    }
}

视口容器高度需要固定，超出视口容器隐藏内容；
为了营造出无缝滚动回来，内容需要准备两份，彼此紧随；
通过移动内层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录制可能稍微短了一点，建议动手试试看哦）

这种轮播的形式是比较常见的一种，也是比较实用完善简单的一种，随便提一句在微信小程序上用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,通知栏,通知栏滚动效果

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“纯CSS实现的三种通知栏滚动效果”

暂无评论...

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

前言

第一种

第二种

第三种

小结

一文教你玩转CSS 组合选择器

CSS实现TikTok文字抖动效果示例

评论“纯CSS实现的三种通知栏滚动效果”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

前言

第一种

第二种

第三种

小结

一文教你玩转CSS 组合选择器

CSS实现TikTok文字抖动效果示例

评论“纯CSS实现的三种通知栏滚动效果”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存