经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
纯CSS实现的三种通知栏滚动效果_CSS教程_CSS
来源：jb51　　时间：2021/2/22 8:38:22　　对本文有异议

前言

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

第一种

HTML部分

  1. <div class="notice">
  2.     <div class="notice__inner">
  3.         <div class="notice__box">
  4.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">橙某人</span>&nbsp;中奖</div>
  5.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">小密圈圈</span>&nbsp;中奖</div>
  6.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">Cooke_</span>&nbsp;中奖</div>
  7.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">爱音乐网站</span>&nbsp;中奖</div>
  8.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">青年之声</span>&nbsp;中奖</div>
  9.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">仙人</span>&nbsp;中奖</div>
  10.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">三十万人编号</span>&nbsp;中奖</div>
  11.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">Maboroshii</span>&nbsp;中奖</div>
  12.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">陈亚明</span>&nbsp;中奖</div>
  13.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">老娘终于发达了</span>&nbsp;中奖</div>
  14.         </div>
  15.         <div class="notice__box">
  16.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">橙某人</span>&nbsp;中奖</div>
  17.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">小密圈圈</span>&nbsp;中奖</div>
  18.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">Cooke_</span>&nbsp;中奖</div>
  19.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">爱音乐网站</span>&nbsp;中奖</div>
  20.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">青年之声</span>&nbsp;中奖</div>
  21.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">仙人</span>&nbsp;中奖</div>
  22.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">三十万人编号</span>&nbsp;中奖</div>
  23.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">Maboroshii</span>&nbsp;中奖</div>
  24.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">陈亚明</span>&nbsp;中奖</div>
  25.             <div class="notice__item">恭喜会员用户&nbsp;<span style="color: red;">老娘终于发达了</span>&nbsp;中奖</div>
  26.         </div>
  27.     </div>
  28. </div>
  29.  

CSS部分

  1. .notice{
  2.     width: 300px;
  3.     height: 300px;
  4.     border-radius: 8px;
  5.     border: 1px solid #eee;
  6.     margin: 100px auto;
  7. }
  8. .notice__inner{
  9.     width: 100%;
  10.     height: 100%;
  11.     overflow: hidden;
  12.     font-size: 14px;
  13.     color: #666;
  14. }
  15. .notice__box{
  16.     animation: roll 10s linear infinite;
  17. }
  18. .notice__item{
  19.     width: 100%;
  20.     height: 30px;
  21.     line-height: 30px;
  22.     padding: 0 12px;
  23.     white-space: nowrap;
  24. }
  25. @keyframes roll {
  26.     0% {
  27.         transform: translateY(0);
  28.     }
  29.     100% {
  30.         transform: translateY(-300px);
  31.     }
  32. }

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

第二种

HTML部分

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

CSS部分

  1. .notice{
  2.     width: 600px;
  3.     height: 40px;
  4.     border-radius: 8px;
  5.     border: 1px solid #eee;
  6.     margin: 100px auto;
  7.     overflow: hidden;
  8. }
  9. .notice__inner{
  10.     animation: roll 36s linear infinite;
  11.     margin-top: 0
  12. }
  13. .notice__item{
  14.     font-size: 14px;
  15.     height: 40px;
  16.     line-height: 40px;
  17.     padding: 0 12px;
  18.     white-space: nowrap;
  19.     text-decoration: underline;
  20. }
  21. @keyframes roll {
  22.     0% {
  23.         margin-top: 0;
  24.     }
  25.     4% {
  26.         margin-top: 0;
  27.     }
  28.     8% {
  29.         margin-top: 0;
  30.     }
  31.     12% {
  32.         margin-top: -40px;
  33.     }
  34.     16% {
  35.         margin-top: -40px;
  36.     }
  37.     20% {
  38.         margin-top: -80px;
  39.     }
  40.     24% {
  41.         margin-top: -80px;
  42.     }
  43.     28% {
  44.         margin-top: -120px;
  45.     }
  46.     32% {
  47.         margin-top: -120px;
  48.     }
  49.     36% {
  50.         margin-top: -160px;
  51.     }
  52.     40% {
  53.         margin-top: -160px;
  54.     }
  55.     44% {
  56.         margin-top: -200px;
  57.     }
  58.     48% {
  59.         margin-top: -200px;
  60.     }
  61.     52% {
  62.         margin-top: -240px;
  63.     }
  64.     56% {
  65.         margin-top: -240px;
  66.     }
  67.     60% {
  68.         margin-top: -200px;
  69.     }
  70.     64% {
  71.         margin-top: -200px;
  72.     }
  73.     68% {
  74.         margin-top: -160px;
  75.     }
  76.     72% {
  77.         margin-top: -160px;
  78.     }
  79.     76% {
  80.         margin-top: -120px;
  81.     }
  82.     80% {
  83.         margin-top: -120px;
  84.     }
  85.     84% {
  86.         margin-top: -80px;
  87.     }
  88.     88% {
  89.         margin-top: -80px;
  90.     }
  91.     92% {
  92.         margin-top: -40px;
  93.     }
  94.     96% {
  95.         margin-top: -40px;
  96.     }
  97.     100% {
  98.         margin-top: 0;
  99.     }
  100. }

（gif录制可能稍微短了一点，建议动手试试看哦）

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

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

第三种

HTML部分

  1. <div class="notice">
  2.     <div class="notice__inner">
  3.         <span class="notice__item notice__item-first">Vue是一个渐进式的 JavaScript 框架</span>
  4.         <span class="notice__item notice__item-second">Vue是一个渐进式的 JavaScript 框架</span>
  5.     </div>
  6. </div>
  7.  

CSS部分

  1. .notice{
  2.     width: 600px;
  3.     height: 40px;
  4.     border-radius: 8px;
  5.     border: 1px solid #eee;
  6.     margin: 100px auto;
  7.     overflow: hidden;
  8. }
  9. .notice__inner{
  10.     height: 100%;
  11.     font-size: 14px;
  12.     color: #333;
  13.     line-height: 40px;
  14.     white-space: nowrap;
  15.     position: relative;
  16. }
  17. .notice__item{
  18.     position: absolute;
  19.     top: 0;
  20.     left: 100%;
  21.     height: 100%;
  22. }
  23. .notice__item-first{
  24.     padding-right: 70%;
  25.     animation: rollFirst 25s linear infinite;
  26. }
  27. .notice__item-second{
  28.     padding-right: 53%;
  29.     animation: rollSecond 25s linear 12s infinite;
  30. }
  31. @keyframes rollFirst {
  32.     0% {
  33.         transform: translateX(0);
  34.     }
  35.     100% {
  36.         transform: translateX(-200%);
  37.     }
  38. }
  39. @keyframes rollSecond {
  40.     0% {
  41.         transform: translateX(0);
  42.     }
  43.     100% {
  44.         transform: translateX(-200%);
  45.     }
  46. }
  47.  

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

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

小结

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

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

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号