Question

我想制作一个不适合div的长文本，不从左向右移动，但是每次都应显示文本的最大可能部分。

标记：

<div class="marquee" style="width:10px">my long text here/div>

行为：

|my long text|
|y long text |
| long text h|
|long text he|
|ong text her|
|ng text here|

等待并改变方向

|ong text her|
|long text he|
| long text h|
|y long text |
|my long text|

重复无限...

我无法使用不熟练的html字幕标记来实现这一点，但是CSS动画应该可以实现吗？

我不想遇到这样的情况：

|           m|

Answer 1

这里是一个示例，您可以通过设置延迟和持续时间来控制文本之间的间隔

.marquee {
  background-color: #ddd;
  width: 100px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
}
.marquee span {
  display: inline-block;
  font-size: 20px;
  position: relative;
  left: 100%;
  animation: marquee 8s linear infinite;
}
.marquee:hover span {
  animation-play-state: paused;
}

.marquee span:nth-child(1) {
  animation-delay: 0s;
}
.marquee span:nth-child(2) {
  animation-delay: 0.8s;
}
.marquee span:nth-child(3) {
  animation-delay: 1.6s;
}
.marquee span:nth-child(4) {
  animation-delay: 2.4s;
}
.marquee span:nth-child(5) {
  animation-delay: 3.2s;
}

@keyframes marquee {
  0%   { left: 100%; }
  100% { left: -100%; }
}

<p class="marquee">
  <span>this is a</span>
  <span>this is a</span>
  <span>this is a</span>
  <span>this is a</span>
</p>

Answer 2

我通过CSS翻译和calc（）解决了这个问题：

/* Make it a marquee */
.marquee {
    width:40px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-align: right;
}

.marquee span {
    display: inline-block;
    animation-name: marquee;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: reverse;

}

/* Make it move */
@keyframes marquee {
    0% {
        transform: translateX(0px)
    }


    40%, 60% {
        transform: translateX(calc(40px - 100%))
    }

    100% {
        transform: translateX(0px)
    }
}

<div class="marquee "><span>my long text here</span></div>

长文本的HTML字幕字幕

2 个答案: