纯CSS实现的三种通知栏滚动效果｜牛气冲天新年征文

2024-02-29 09:46| 来源: 网络整理| 查看: 265

新年后第一文，大家牛年大吉呀！！！

前言

通知栏组件是一个比较常见的组件了，基本上每个站点都会有怎么个组件，主要就是通告站点的一些变化或者是告知一些中奖名单等作用。最近在复习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那么灵活，但以上例子还是很适合一些固定好文案的场景，也适合在开发阶段快速做出交互效果。

总之，我自己觉得蛮有趣的，希望或多或少对读到这篇文章的人有点帮助。

【本文地址】

公司简介

联系我们