css - 没有绝对定位的纯 CSS ticker

Question

我正在尝试设计一个纯 CSS 代码(就像您在电视上看到的那样)，只是不会粘在屏幕底部。

我已经找到了涉及 JS 的东西，但我正在努力避免使用 JS。

我还发现了一些其他人创建的纯 CSS 代码。但问题在于它们都使用 position: absolute ，这会将它们固定在屏幕底部。一旦我摆脱了绝对定位，我就得到了一个水平滚动条，正如预期的那样。

有什么方法可以使用纯 CSS 来完成，同时避免滚动条并将元素粘贴到设置的监视器位置？

这是我的起点 fiddle :https://jsfiddle.net/xcommie/6fkfj3gk/

HTML:

<p>Content before ticker</p>
  <div id="tickerwrap">
    <div id="ticker">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel augue eget velit tristique pretium. Nam ultrices nulla risus, ut elementum mauris dignissim at. Sed ultrices placerat dolor, ac congue nunc molestie et.
    </div>
  </div>
<p>Content after ticker</p>

CSS:

/* Specifying the name for animation keyframes and keyframes themselves */
@keyframes customticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}


/* Formatting the full-width ticker wrapper background, font color, padding and initial content state (the "padding-left" item) */
#tickerwrap {
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding-left: 100%;
}


/* Formatting the ticker content background, font color, padding and final content state (the padding-right item) */
#ticker {
  display: inline-block;
  white-space: nowrap;
  padding-right: 100%;
  -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: 7s;
  animation-duration: 7s;
}

Answer 1

我已经创建了您的代码的修改版本:

/* Specifying the name for animation keyframes and keyframes themselves */
@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: 7s;
  animation-duration: 7s;
}

如您所见 - 没有 position: absolute - 我已经从 #tickerwrap 和 #ticker 元素 中删除了填充 - 它没有必要。我更改了转换状态，而不是它 - 现在它以 100% 开始并以 -100% 结束。