Question

我正在努力想出一个纯CSS的自动收报机（就像你在电视上看到的那样），只有不粘在屏幕的底部。

我已经找到了涉及JS的东西，但我试图避免使用JS。

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

任何方法都可以使用纯CSS完成，同时避开滚动条并将元素粘贴到设置的监视器位置？

这是我的起点：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;
}

正如您所看到的 - 没有位置：绝对 - 我已从 #tickerwrap 和 #ticker元素中移除了填充 - 它没必要。取而代之的是我改变了转换状态 - 现在它以 100％开头，以 -100％结束。

Answer 2

您可以使用<marquee>查看https://jsfiddle.net/sxh0n7d1/30/

有关<marquee>的更多信息，请参阅此处：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

<p>Content before ticker</p>
  <div id="tickerwrap">
    <marquee 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.
    </marquee>
  </div>
<p>Content after ticker</p>

CSS

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

纯CSS自动收报机没有绝对定位

2 个答案: