uniapp跑马灯文字滚动

阿巴资源站

已于 2023-08-31 13:47:10 修改

阅读量2.4k

点赞数 1

文章标签： css

于 2023-08-31 13:47:00 首次发布

本文链接：https://blog.csdn.net/qq_37194189/article/details/132601481

版权

<view class="barrage-box">
  <view class="text">{{item.name}}</view>
</view>

.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%);
            }
        }