纯css 实现跑马灯效果

重点：使用 inline-block 获取实际文本的宽度

由于p标签的宽度为父元素的 100%，如果是这样，我们很难进行下面的操作。我们首先需要拿到实际文本的宽度，这里可以借助 inline-block 的特性，做到这一点.**

<style>
        .wrap {
   
            position: relative;
            width: 200px;
            height: 100vh;
            background: #ddd;
            overflow: hidden;
        }

        span {
   
            display: inline-block;
            white-space: nowrap;
            padding: 5px;
            line-height: 24px;
            cursor: pointer;
        }

        .one:hover {
   
            animation: move 5s infinite alternate linear;
        }

        @keyframes move {
   
            0% {
   
                transform: translate(0, 0);
            }

            100% {
   
                transform: