css - 响应式水平全屏滚动 div

Question

我正在寻找为特定项目添加非 JS CSS3 动画的解决方案。

这个动画应该自动开始，每 10 秒滚动一次（水平）到下一页。

<table style="width:100%">
  <tr>
    <th>First</th>
    <th>Second</th> 
    <th>Third</th>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td> 
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td> 
    <td>F</td>
  </tr>
</table>

假设我们有三页包含此内容。什么是我的问题的适当解决方案？

标签： csscss-transitionscss-animations

Answer 1

您可以使用margin-left滚动。但为此，我相信您可能需要更改您的 html。

请参阅下面的片段：

.page-container{
  animation: scroll 8s 2s infinite linear forwards;
  width:2000px;
}

.page {
  width:650px;
  height:200px;
  color:white;
  font-family:calibri;
  text-align:center;
  vertical-align:middle;
  line-height:60px;
  display:inline-block;
}
.one{
  background: #3A4662;
}

.two{
  background: #00827F;
}

.three{
  background: #580137;
}


@-webkit-keyframes scroll {
  10% {
    margin-left: 0px;
  }
  35%{
    margin-left: -650px;
  }
  50%{
    margin-left: -650px;
  }
  75%{
    margin-left: -1300px;
  }
  90%{
    margin-left: -1300px;
  }
  95%{
    margin-left:0px;
  }
  100% {
    margin-left: 0px;
  }
}

<div class="page-container">
  <div class="page one">
    <div>First</div>
    <div>A</div>
    <div>D</div>
  </div>
  <div class="page two">
    <div>Second</div> 
    <div>B</div> 
    <div>E</div> 
  </div>
  <div class="page three">
    <div>Third</div>
    <div>C</div>
    <div>F</div>
  </div>
</div>

你也可以在这里测试