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>

假设我们有 3 个页面包含此内容。什么是解决我的问题的合适方法？

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>

你也可以测试一下here

div 的响应式水平全屏滚动

Responsive horizontal fullscreen scrolling of divs

css

css-transitions

css-animations