uniapp跑马灯文字滚动

uniapp跑马灯文字滚动_第1张图片


  {{item.name}}


.barrage-box {
        // border: 1rpx solid red;
        padding: 0 10rpx;
        width: 90vw;
        transform-origin: 65vw 75vw;
        transform: rotate(0deg);
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
        // background-color: #000;
        z-index: 3;
        }
     
        .text {
            width: 200vw;//调整文字显示
            font-size: 16px;
            color: #000;
            animation: aniMove 8s linear infinite;
            animation-fill-mode: forwards;
        }
     
        /* 文字滚动 */
        @keyframes aniMove {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }

你可能感兴趣的:(css)