用CSS实现一个字符串的跑马灯效果，并首尾衔接

目标

用CSS实现一个字符串的跑马灯效果，并首尾衔接

实现

下面是首尾衔接的实现方案

@keyframes marquee {   // 关键
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
 .name {
            font-size: 13px;
            font-weight: bold;
            padding: rem(5) 0 rem(10);
            &.long-name {
                white-space: nowrap; // 关键
                animation: marquee 8s linear infinite; // 关键
                width: fit-content; // 关键
                padding-left: 10px; // 关键
                &::after { // 关键
                    position: absolute;
                    right: -100%;
                    content: attr(data-text);
                }
            }
        }

下面是不需要守卫衔接的实线方案

@keyframes marquee {   // 关键
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
 .name {
            font-size: 13px;
            font-weight: bold;
            padding: rem(5) 0 rem(10);
            &.long-name {
                white-space: nowrap; // 关键
                animation: marquee 8s linear infinite; // 关键
                width: 100%; 
            }
        }