一个滚动播放文字的广播的实现

一、现成的一个

这个是我网上找到的，直接copy下来，再用浏览器打开html文件就是一个滚动广播
https://blog.youkuaiyun.com/qq_30449567/article/details/80417304
附他这个效果图

二、怎么使用

我自己的代码，也是参考一里面的，但读者只需把这些样式拷贝到css中就行–复制–粘贴就可以

.txt{
  padding-left: 20px;
  font-size: 12px;
  color:red;
  /* display: inline-block; */
  white-space: nowrap;
  animation: 15s wordsLoop linear infinite normal;
  padding-bottom: 5px;
}
@keyframes wordsLoop {
            0% {
                transform: translateX(300px);
                -webkit-transform: translateX(300px);
            }
            100% {
                transform: translateX(-150%);
                -webkit-transform: translateX(-150%);
            }
        }
 
@-webkit-keyframes wordsLoop {
            0% {
                transform: translateX(300px);
                -webkit-transform: translateX(300px);
            }
            100% {
                transform: translateX(-150%);
                -webkit-transform: translateX(-150%);
            }
        }

html部分的代码
是不是超级简单！

<view class="txt">
    手机在谁名下谁负责，若有人借手机请借手机的同学使用小程序的扫一扫功能借手机
  </view>

三、你需要调整的地方

别人的代码不是拿来就可以用的，有些需要调整，例如这些文字从哪个地方进入，从哪个地方消失，滚动的快慢，下面大概分析下他的代码

1）animation: 15s wordsLoop linear infinite normal;

15s表示15s播放完，时间越短滚动的越快

2）@keyframes wordsLoop @-webkit-keyframes

这两个就是滚动开始和结束的坐标定义，为啥是两个了，因为一个支持谷歌浏览器一个支持的ie内核

3）0%和100%

改变0%下面的值是改变开始的坐标，100%是改变结束时候的坐标
详细的你可以搜索transform这个关键字

四、上效果