Question

我虽然这很容易理解，但我很难掌握它......

我希望屏幕上的某些文字能够动画。

我希望文本从包装器的最左侧开始，向左移动直到文本显示完毕，然后在定义的包装器大小内再次向右移动（有点像跳出效果）。

我希望隐藏溢出文本。

我想连续循环。

我希望这能在所有浏览器中正确显示。

这是我需要的地方：

<style type="text/css">
    #wrapper {
    width: 450px;
    height: 20px;
    background-color: #FF0004;
}

.marquee {
    overflow: hidden;
    white-space: nowrap;
    animation: marquee  3s linear infinite;
    -webkit-marquee-style: alternate;
}

@keyframes marquee {
    0%   { text-indent: 0% }
    100% { text-indent: -130% }
}
</style>

<div id="wrapper" class="marquee">marquee information marquee information marquee information marquee information</div>
</div>

非常感谢任何帮助

贾斯汀。

Answer 1

我认为你在问题中发布的代码有一些错别字。只有一个div包含包装器ID和选取框类。

以下是我认为可以实现预期效果的一些代码。我不认为你在问题中尝试使用text-indent会起作用，因为text-indent中的百分比并不是指包含元素的宽度。我使用position：relative和固定宽度的marquee元素来完成它。

以下是演示：http://codepen.io/Ghodmode/pen/tEDbk

您必须添加必要的浏览器前缀。该演示依赖于无前缀。

HTML：

<div id="wrapper">
  <div class="marquee">
    <p>Marquee</p>
  </div>
</div>

CSS：

#wrapper {
  width: 450px;
  background-color: #ff0004;
  position: relative;
  height: 20px;
  line-height: 20px;
  margin: 1em auto;
  overflow: hidden;
}

div.marquee {
  position: absolute;
  width: 7em;
  background-color: #bfb;
  text-align: center;
  animation-name: marquee;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

p {
  margin: 0;
}

@keyframes marquee {
  from {
    left: 100%;
  }
  to {
    left: -7em;
  }
}

Answer 2

首先，css3 marquee目前仅支持webkit浏览器。使用另一种跨浏览器可比性的方法（如javascript或jQuery）可能会更好。

Click Here是一个很棒的jQuery滚动条。

如果您仍想使用css，则以下是选框的语法：

-webkit-marquee: [direction] [increment] [repetition] [style] [speed];

您还需要将overflow-x设置为-webkit-marquee：

overflow-x: -webkit-marquee;

以下是适用于webkit浏览器的代码版本，例如chrome和safari：

<style>
.wrapper{
    width: 450px;
    height: 20px;
    background-color: #FF0004;
}
.marquee{
    white-space:nowrap;
    -webkit-marquee: right small infinite alternate fast;
    overflow-x: -webkit-marquee;
}
</style>
<div class="wrapper">
    <div class="marquee">
        marquee information marquee information marquee information marquee information marquee information marquee information marquee information
    </div>
</div>

了解CSS3中的Marquee效果

2 个答案:

HTML：

CSS：