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

前提:

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

首先面向百度编程

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

缺点

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

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

利用动画完美解决

//滚动文案
<view class='scrollx'>
    <view class="scroll-animation">滚动文案</view>
</view>

//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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,166评论 0 0
  • 长安承载着太多故事于千万年之中,金戈铁马,统一六国的一代枭雄秦始皇,生前震惊四邻,身后留下的兵马俑惊艳世界;于千万...
    过己阅读 599评论 0 0
  • “对不起,爸爸到这个份上,什么都没留给你。” 男人挤出的这几个字,含含糊糊勉强能听清。原本是干瘪黢黑的他,现在却被...
    林文l阅读 1,064评论 4 11
  • 我想要天天跟你在一起 一起发呆 一起做所有无聊的事情 就算我们偶尔吵架也没关系 我还是想要每天都看到你 我不会突然...
    常樂丶阅读 323评论 0 2