小程序端实现循环滚动字幕

前提：

由于小程序标签和web端标签不同，所以无法使用原有属性直接实现文字滚动。

首先面向百度编程

ennnnnnnnn....算了不贴代码了，一搜一大堆的东西，不骗字数，清一色js实现

缺点

实验了一下，通过js实现的话，

• 会有卡顿的效果，不柔和。要求不高的可以使用
• 大量代码，这不是产品认为的简单需求么，怎么能耗费这么多代码呢。作为一个初入行业的搬砖工来说也是不可容忍的。

---

利用动画完美解决

//滚动文案

    滚动文案


//css
.scrollx{
  width: 100%;
  height: 68rpx;
  line-height: 68rpx;
  white-space: nowrap;
  font-size: 14px;
  position: relative;
  overflow: hidden;
}


.scroll-animation{
  position: absolute;
  top:0px;
  width: 100%;
  font-size: 26rpx;
  color: rgba(25,83,157,1);
  animation: scrollItps 18s linear  infinite ;
}

@keyframes scrollItps{
  0%   { left:100%;}//其实这里最好使用  transform: translate();translate针对的本身元素平移，left这种百分比是针对父元素的
  100% { left:-180%; }
}

至于文字滚动方向.......不是更简单了么。上上下下左右左右ABAB。