内容简介:【小程序可用】CSS3 animation 实现的跑马灯
最近有个项目里面用到跑马灯,网上搜了下,虽然有人贴出来过一些实现,但是实际上都存在一些个问题。
哎,再造个轮子吧。
先放个效果:
p.s. 如果能访问jsfiddle最好: https://jsfiddle.net/650spwen/
主要原理
微信小程序现在实际上还是用的webview,里面搞动画效率最高的莫过于使用CSS3的animation了。
跑马灯无非就是一直滚动,这很容易想到使用无限循环的animation.
而一直往左滚动的效果,通过css有很多种方式,比如通过改变 left
, margin-left
, tranform: translateX()
都可以实现。但是 left
和 margin-left
一般会导致布局的重新计算。使用 transform: translateX()
性能会更好一些。
主要实现代码
首先,视图模板wxml中:
<view>css3 + animation跑马灯</view> <view class="marquee"> <view class="content"> <text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text> <text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text> <text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text> </view> </view>
这里为了连续无限滚动,特意复制了2份跑马灯的内容( .content
)。
然后,样式wxss中:
@keyframes kf-marque-animation{ 0% { transform: translateX(0); } 100% { transform: translateX(-33.3%); } } .marquee{ width: 100%; height: 44px; line-height: 44px; background: #fff; border: none; display: block; margin: 0 auto; overflow: hidden; white-space: nowrap; text-overflow: clip; position: relative; font-size: 28rpx; } .marquee .content{ display: inline-block; position: relative; padding-right: 0px; animation: kf-marque-animation 11.3s linear infinite; white-space: nowrap; }
最后,js里面随便给 page.data.text
赋值一段文本即可。具体js略。
如果要调整滚动速度,可以设置 .content
的元素的动画时间( animation-duration
样式)。由于微信小程序中无法获取到对应元素的宽度,这个时间只能写死或者根据 text
的长度估算出一个值。
完整的示例在jsfiddle上有个html版本的: https://jsfiddle.net/650spwen/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
XML 在线格式化
在线 XML 格式化压缩工具
HEX CMYK 转换工具
HEX CMYK 互转工具