您现在的位置是：网站首页> 编程资料编程资料

纯CSS实现的三种通知栏滚动效果css3 实现滚动条美化效果的实例代码使用纯 CSS 实现滚动阴影效果纯css3实现横向无限滚动的示例代码CSS3制作圆形滚动进度条动画的示例Css3实现无缝滚动防抖CSS实现隐藏滚动条并可以滚动内容效果(三种方式)通过css动画实现一个表格滚动轮播效果css设置Overflow实现隐藏滚动条的同时又可以滚动css实现5种滚动吸顶实现方式的比较(性能升级版)css 给div添加滚动并隐藏滚动条

2023-10-17 388人已围观

简介 这篇文章主要介绍了纯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通知栏内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：CSS实现TikTok文字抖动效果示例css实现快速炫酷抖动动画效果CSS3实现红包抖动效果css3 transform过渡抖动问题解决css3动画效果抖动解决方法CSS 控制Html页面高度导致抖动问题的原因CSS行为expression轻松实现IE6无抖动固定定位css3让div随鼠标移动而抖动起来CSS 控制因Html页面高度导致抖动的问题解决方法

下一篇：一文教你玩转CSS 组合选择器CSS3选择器新增问题的实现CSS 选择所有子元素添加样式的方法CSS选择器中的正则表达式使用CSS3 新增选择器的实例

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网