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

栏目: CSS · 发布时间: 3年前

来源: segmentfault.com

内容简介:【小程序可用】CSS3 animation 实现的跑马灯

本文转载自:https://segmentfault.com/a/1190000009571886?utm_source=tuicool&utm_medium=referral,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有。

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

哎,再造个轮子吧。

先放个效果: 【小程序可用】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/


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

关注码农网公众号

关注我们,获取更多IT资讯^_^


查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python高性能编程

Python高性能编程

【美】 戈雷利克 (Micha Gorelick)、【美】 欧日沃尔德(Ian Ozsvald) / 人民邮电出版社 / 2017-7-1 / 79

本书共有12章,围绕如何进行代码优化和加快实际应用的运行速度进行详细讲解。本书主要包含以下主题:计算机内部结构的背景知识、列表和元组、字典和集合、迭代器和生成器、矩阵和矢量计算、并发、集群和工作队列等。最后,通过一系列真实案例展现了在应用场景中需要注意的问题。 本书适合初级和中级Python程序员、有一定Python语言基础想要得到进阶和提高的读者阅读。一起来看看 《Python高性能编程》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试