Question

我正在为我运行的以Angular编写的竞赛服务器打扮一个计分板。在记分板上，如果用户或团队的名称超过12个字符，我将CSS类应用于团队或用户得分div，以强制其滚动。

问题是，如果名称的长度不同，我最终将使各个元素滚动的方式有所不同，通常是部分滚动（如果有意义的话，可能是“过度滚动”），它会在其中滚动另一遍），然后闪烁，然后重新启动，而有些遍并不总是一直滚动到div之外。

我正在寻找想法和建议。 CSS绝对是我的弱点。这是当前应用于12个以上字符的所有元素的CSS：

#marquee p {
  white-space: nowrap;
  animation-name: sidescroll;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function:  linear;
}

@keyframes sidescroll {
  0% { transform:translateX(125%); }
  100% { transform:translateX(-125%); }
}

这是Angular模板：

    <div *ngIf="scorer.name.length > 12" class="element name" id="marquee"><p>{{scorer.name}}</div>
    <div *ngIf="scorer.name.length < 13" class="element name">{{scorer.name}}</div>
    <div class="element hints">{{scorer.hints}} hints</div>
    <div class="element lost">{{scorer.pointsLost}} lost</div>
    <div class="element svg" [innerHTML]="scorer.svg"></div>
    <div class="element score">{{scorer.score}}</div>

Answer 1

诀窍在于，当使用百分比时，诸如left之类的属性是相对于容器（最接近的父对象）大小的，而transform: translate百分比是相对于元素大小本身的。您希望元素从其父级右边的左边滚动到其父级左边的右边，以便可以使用这些属性的组合。

#marquee {
    position: relative;
    width: 200px;
    background: #eee;
    overflow: hidden;
}
#marquee::before {
    /* makes sure the height is correct as the position absolute p doesn't take any space */
    content: ' ';
    white-space: pre;
}

#marquee p {
    position: absolute;
    top: 0;
    margin: 0;
    white-space: nowrap;
    animation: sidescroll 10s linear infinite;
}

@keyframes sidescroll {
    0% {
        /* left side of the element */
        transform: translateX(0);
        /* on the right of the parent */
        left: 100%;
    }
    100% {
        /* right side of the element */
        transform: translateX(-100%);
        /* on the left of the parent */
        left: 0;
    }
}

JSFiddle

注意：您忘记了关闭P标签。

通过CSS的多格水平字幕

1 个答案: