记录一次全屏标题过长滚动显示的开发过程

1.开始使用marquee，过时了。不可

2，使用定时器操作数组，消耗性格

3，使用插件，出现不显示尾部的问题，改用其他的

4，使用css3的动画实现。效果好

<style>

    .scroll{

      width: 200px;

      height: 50px;

      line-height: 50px;

      white-space: nowrap;

      overflow: hidden;

      font-size: 30px;

      border: 1px solid #FF0000;

    }

    .scroll span{

      display: inline-block;/*inline样式不能使用动画*/

      animation: scroll 10s linear infinite;

    }

    @keyframes scroll {

      from {

        transform: translateX(200px)

      }

      to {

        transform: translateX(-100%)

      }

    }

</style>

<div class="scroll">

    <span>我是一个滚动条啊滚动条</span>

</div>

链接地址

https://blog.csdn.net/weixin_38417117/article/details/93175480