滚动栏效果

效果展示：

代码展示：

html：
 

<!-- 创建滚动栏 -->
    <div class="box">
        <!-- 滚动栏文本 -->
        <p class="word" v-for="(n,j) in 2" :key="j">点赞   关注   收藏</p>
    </div>

css：

 * {
            /* 去除页面边距 */
            padding: 0;
            margin: 0;
        }

        .box {
            /* 字体大小设置 */
            font-size: 20px;
            /* 文本上下居中，line-height的设置即为滚动栏的height */
            line-height: 50px;
            /* 背景颜色 */
            background-color: rgb(0, 0, 0, 0.3);
        }

        .word {
            /* 设置了 display: inline-block，可保留上下外边距/内边距 */
            display: inline-block;
            /* 将宽度设置为100%，使文本滚动占据整个页面 */
            width: 100%;
            /* 动画设置 */
            animation: 5s wordsLoop linear infinite normal;
        }
        /* 将文本渲染两边，使文本滚动效果是连续的 */
        @keyframes wordsLoop {

            0% {

                transform: translateX(1500px);

                -webkit-transform: translateX(1500px);

            }

            100% {

                transform: translateX(-100%);

                -webkit-transform: translateX(-100%);

            }

        }

        @-webkit-keyframes wordsLoop {

            0% {

                transform: translateX(1500px);

                -webkit-transform: translateX(1500px);

            }

            100% {

                transform: translateX(-100%);

                -webkit-transform: translateX(-100%);

            }

        }

注：动画中的transform值可根据使用的页面大小进行更改

创作不易，点赞收藏就是对博主最大的支持。