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>

我们假设我们获得了三页包含此内容的页面。什么是解决我的问题的合适方法？

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的响应式水平全屏滚动

1 个答案: