html - 纯 CSS 新闻/信息提要

Question

我有一些工作正常的代码，它只是添加了一个水平新闻提要(或我列出的任何信息)，它工作得很好，没有闪烁，但是当我向其中添加更多数据时，似乎需要一段时间才能加载，并且速度变化？我还有很多信息要添加到其中，但我不想每次数据更改时都不断更改速度。

任何帮助都会很棒，谢谢

@keyframes customticker {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}


/* Formatting the full-width ticker wrapper background and font color */

#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}


/* Formatting the ticker content background, font color, padding and exit state */

#ticker {
  display: inline-block;
  white-space: nowrap;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: customticker;
  animation-name: customticker;
  -webkit-animation-duration: 70s;
  animation-duration: 70s;
}

<div id="tickerwrap">
  <div id="ticker">
    Avon <span style="color: #333638"> | </span> Bedfordshire <span style="color: #333638"> | </span> Buckinghamshire <span style="color: #333638"> | </span> Cambridgeshire <span style="color: #333638"> | </span> Cheshire <span style="color: #333638"> | </span>    Cleveland <span style="color: #333638"> | </span> Clwyd <span style="color: #333638"> | </span> Cornwall <span style="color: #333638"> | </span> County Antrim <span style="color: #333638"> | </span> County Armagh<span style="color: #333638"> | </span>    County Down<span style="color: #333638"> | </span> County Fermanagh<span style="color: #333638"> | </span> C ounty Londonderry<span style="color: #333638"> | </span> County Tyrone <span style="color: #333638"> | </span> Cumbria <span style="color: #333638"> | </span>    Derbyshire <span style="color: #333638"> | </span> Devon <span style="color: #333638"> | </span> Dorset <span style="color: #333638"> | </span> Dumfries <span style="color: #333638"> | </span> Galloway <span style="color: #333638"> | </span> Durham
    <span style="color: #333638"> | </span> Dyfed <span style="color: #333638"> | </span> East Sussex <span style="color: #333638"> | </span> Essex <span style="color: #333638"> | </span> Fife <span style="color: #333638"> | </span> Gloucestershire
    <span
      style="color: #333638"> | </span>
      Grampian <span style="color: #333638"> | </span> Greater Manchester <span style="color: #333638"> | </span> Gwent <span style="color: #333638"> | </span> Gwynedd County <span style="color: #333638"> | </span> Hampshire <span style="color: #333638"> | </span>      Herefordshire
  </div>
</div>

但我想向其中添加更多数据，而不需要花费很长时间来加载。

谢谢

Answer 1

使用 margin-left 和 transform-origin

的解决方案

我有一个关于 margin-left 和 transform-origin 的棘手解决方案。

@keyframes customticker {
  0% {
    margin-left: 100%;
    transform: translateX(0);
  }
  100% {
    margin-left: 0%;
    transform: translateX(-100%);
  }
}

#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: black;
}

#ticker {
  display: inline-block;
  color: white;
  white-space: nowrap;
  transform-origin: 100% 0;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: customticker;
  animation-duration: 60s;
}

#ticker span {
  color: grey;
}

<div id="tickerwrap">
  <div id="ticker">
    Avon <span>|</span>
    Bedfordshire <span>|</span>
    Buckinghamshire <span>|</span>
    Cambridgeshire <span>|</span>
    Cheshire <span>|</span>
    Cleveland <span>|</span>
    Clwyd <span>|</span>
    Cornwall <span>|</span>
    County Antrim <span>|</span>
    County Armagh <span>|</span>
    County Down <span>|</span>
    County Fermanagh <span>|</span>
    County Londonderry <span>|</span>
    County Tyrone <span>|</span>
    Cumbria <span>|</span>
    Derbyshire <span>|</span>
    Devon <span>|</span>
    Dorset <span>|</span>
    Dumfries <span>|</span>
    Galloway <span>|</span>
    Durham <span>|</span>
    Dyfed <span>|</span>
    East Sussex <span>|</span>
    Essex <span>|</span>
    Fife <span>|</span>
    Gloucestershire <span>|</span>
    Grampian <span>|</span>
    Greater Manchester <span>|</span>
    Gwent <span>|</span>
    Gwynedd County <span>|</span>
    Hampshire <span>|</span>
    Herefordshire
  </div>
</div>

使用 padding-left 和 padding-right

的解决方案

或者@Jules提出的解决方案，使用padding-left和padding-right。

@keyframes ticker {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: black;
  padding-left: 100%;
}

#ticker {
  display: inline-block;
  color: white;
  white-space: nowrap;
  padding-right: 100%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: ticker;
  animation-duration: 60s;
}

#ticker span {
  color: grey;
}

<div id="tickerwrap">
  <div id="ticker">
    Avon <span>|</span>
    Bedfordshire <span>|</span>
    Buckinghamshire <span>|</span>
    Cambridgeshire <span>|</span>
    Cheshire <span>|</span>
    Cleveland <span>|</span>
    Clwyd <span>|</span>
    Cornwall <span>|</span>
    County Antrim <span>|</span>
    County Armagh <span>|</span>
    County Down <span>|</span>
    County Fermanagh <span>|</span>
    County Londonderry <span>|</span>
    County Tyrone <span>|</span>
    Cumbria <span>|</span>
    Derbyshire <span>|</span>
    Devon <span>|</span>
    Dorset <span>|</span>
    Dumfries <span>|</span>
    Galloway <span>|</span>
    Durham <span>|</span>
    Dyfed <span>|</span>
    East Sussex <span>|</span>
    Essex <span>|</span>
    Fife <span>|</span>
    Gloucestershire <span>|</span>
    Grampian <span>|</span>
    Greater Manchester <span>|</span>
    Gwent <span>|</span>
    Gwynedd County <span>|</span>
    Hampshire <span>|</span>
    Herefordshire
  </div>
</div>