脚本宝典收集整理的这篇文章主要介绍了

【小程序可用】CSS3 animation 实现的跑马灯

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

最近有个项目里面用到跑马灯,网上搜了下,虽然有人贴出来过一些实现,但是实际上都存在一些个问题。

哎,再造个轮子吧。

先放个效果:

p.s. 如果能访问jsfiddle最好:https://jsfiddle.net/650spwen/

主要原理

微信小程序现在实际上还是用的webview,里面搞动画效率最高的莫过于使用CSS3的animation了。

跑马灯无非就是一直滚动,这很容易想到使用无限循环的animation.

而一直往左滚动的效果,通过css有很多种方式,比如通过改变left, margin-left, tranform: translateX()都可以实现。但是 leftmargin-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/

总结

以上是脚本宝典为你收集整理的

【小程序可用】CSS3 animation 实现的跑马灯

全部内容,希望文章能够帮你解决

【小程序可用】CSS3 animation 实现的跑马灯

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过