简单实现广播功能

简介

用transform 实现简单的广播功能，遇到有意思的实现方式后续再行添加

代码

动画.gif

<body>
  <div class="info-h">
    <ul>
      <li>语文</li>
      <li>数学</li>
      <li>英语</li>
      <li>语文</li>
    </ul>
  </div>
  <br />
  <div class="info-v">
    <ul>
      <li>语文</li>
      <li>数学</li>
      <li>英语</li>
      <li>语文</li>
    </ul>
  </div>
  <style>
  /* 水平方向 */
  @keyframes move-h {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-360px);
    }
  }
  .info-h {
    width: 120px;
    height: 20px;
    background-color: #1e80ff;
    color: white;
    /* overflow: hidden; */
  }
  .info-h ul {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    animation: move-h 4s linear infinite;
  }
  .info-h li {
    flex-shrink: 0; 
    list-style: none;
    line-height: 20px;
    display: inline-block;
    width: 120px;
  }
  </style>
  <style>
    /* 垂直方向 */
    @keyframes move-v {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(-60px);
      }
    }
    .info-v {
      width: 120px;
      height: 20px;
      background-color: #1e80ff;
      color: white;
      overflow: hidden;
    }
    .info-v ul {
      margin: 0;
      padding: 0;
      animation: move-v 4s linear infinite;
    }
    .info-v li {
      line-height: 20px;
    }
  </style>
</body>

原理

第一条数据加到最后为了和下一轮无缝衔接，transform平移的长度为(list.length - 1) * 单位长度

end

人类的躯体实在是太弱了，记下的东西很快就会忘掉，作为文明传递的介质有点拉，所以即使简单也多记录一下吧

css 简单实现广播功能

简单实现广播功能

简介

代码

原理

end