纯 CSS 实现 超长内容滚动播放。

需���：文案来回在指定区域内水平滚动，并且在头尾处停留一段时间 ​

以vue为例，封装一个通用组件

                    {{ text}}              // 使用需要外层套一个p给盒子宽度  export default {    props: {      // 滚动的文本      text: {        type: String,        default: '',      },      // 颜色      color: {        type: String,        default: '#333333',      },      // 文字大小      fontSize: {        type: String,        default: '24',      },      fontWeight: {        type: String,        default: '500',      }    },    data() {      return {};    },    mounted() {},    methods: {},  };  .box {    width: 100%;    // border: 1px solid;  }  .scroll-wrap {    max-width: 100%;    display: inline-block;    vertical-align: top;    overflow: hidden;    white-space: nowrap;  }  .scroll-item {    animation: scroll linear 4s alternate infinite;    float: left;  }  @keyframes scroll {    0% {      margin-left: 0;      transform: translateX(0);    }    10% {      margin-left: 0;      transform: translateX(0);    }    90% {      margin-left: 100%;      transform: translateX(-100%);    }    100% {      margin-left: 100%;      transform: translateX(-100%);    }  }

使用组件

简单解释一下当前 animation 的属性

• animation-name：所使用的 @keyframes 的名称 scroll
• animation-timing-function：动画的速度曲线，linear 表示匀速
• animation-duration：规定完成动画所花费的时间为 4s
• animation-direction：是否应该轮流反向播放动画，alternate 表示在偶数次会反向播放
• animation-iteration-count：定义动画的播放次数，infinite 表示无限次