html - 通过 CSS 的多 div 水平选取框

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 标签。