纯css实现文字左右循环滚动播放效果

最新推荐文章于 2024-05-11 11:24:23 发布

小tenten

最新推荐文章于 2024-05-11 11:24:23 发布

阅读量1.2k

点赞数 3

分类专栏： css 前端页面布局文章标签： css 前端

本文链接：https://blog.csdn.net/qq_39877681/article/details/136204611

版权

css 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端页面布局

5 篇文章 3 订阅

订阅专栏

本文介绍了一种利用CSS和JavaScript创建的延迟滚动效果，通过两个span模块配合关键帧动画，实现在网页中系统通知的缓慢出现和消失，保证了良好的用户体验。

摘要由CSDN通过智能技术生成

思路：由两个span模块组成，第一个为空的span内容，为的是实现第二个span内容缓慢出现的效果。

代码如下：

   <div class="scrollingStyle">
       <span class="first-marquee"></span>
       <span class="second-marquee">系统通知：【{{scrollingText}} 发布于：{{time}}】</span>
   </div>

  .scrollingStyle {
    font-size: 16px;
    width: 300px;
    overflow: hidden; /*超出文本的范围就隐藏*/
    white-space: nowrap; /*超出文本的范围不换行*/
    text-overflow: ellipsis; /*在文本的范围内,末尾以"..."的形式展示*/
  }
  .first-marquee {
  /*第一个span的播放速度*/
    -webkit-animation: 5s first-marquee 1s linear infinite normal;
    animation: 5s first-marquee linear 1s infinite normal;
    padding-right: 100%;
  }

  @keyframes first-marquee {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    /* 向左移动 */
    100% {
      -webkit-transform: translate3d(-200%, 0, 0);
      transform: translate3d(-200%, 0, 0);
      display: none;
    }
  }

  .second-marquee {
    /* 第二个span的播完速度 */
    -webkit-animation: 25s first-marquee linear infinite normal;
    animation: 25s first-marquee linear infinite normal;
    padding-right: 53%;
  }

  @keyframes second-marquee {
    0% {
      -webkit-transform: translate3d(0%, 0, 0);
      transform: translate3d(0%, 0, 0);
    }
    100% {
      -webkit-transform: translate3d(-200%, 0, 0);
      transform: translate3d(-200%, 0, 0);
      display: none;
    }
  }