[分享]css公告栏数据滚动衔接

CSS公告栏数据滚动衔接是指在网页上实现公告栏信息自动滚动，以轮播的形式展示多条信息。

 <div class="notice">
    <ul>
      <li>公告1</li>
      <li>公告2</li>
      <li>公告3</li>
    </ul>
  </div>

  <style>
    .notice {
      width: 300px;
      height: 30px;
      overflow: hidden; /* 隐藏超出部分 */
    }
    .notice ul {
      width: 900px; /* 3条公告，每条宽度300px */
      height: 30px;
      position: relative; /* 相对定位 */
      left: -300px; /* 初始位置，向左偏移一个宽度 */
      animation: noticeMove 10s infinite linear; /* 动画 */
    }
    .notice li {
      float: left;
      width: 300px;
      height: 30px;
      line-height: 30px;
    }
    @keyframes noticeMove {
      to {
        left: -600px; /* 滚动至第2个公告 */
      }
      to {
        left: -900px; /* 滚动至第3个公告 */
      }
      to {
        left: 0; /* 滚动至第1个公告，循环 */
      }
    }
  </style> 

上述代码设置了一个宽度为300px、高度为30px、最多显示一条公告的公告栏。ul元素包含三个li元素，分别代表三条公告。公告栏使用overflow:hidden隐藏超出部分，ul相对定位并向左偏移一个宽度，使第一条公告在可见范围内，而后三条公告在超出可见范围之外。通过CSS3中的animation属性，用关键帧动画实现公告栏的无限循环滚动。其中关键帧动画通过to实现循环播放，同时在每个to中指定的left值使ul元素向左移动一个宽度，实现公告栏的轮播效果。