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

tianlai 发布于2019-08-20 16:50 / 2681人阅读

摘要：先放个效果如果能访问最好主要原理微信小程序现在实际上还是用的，里面搞动画效率最高的莫过于使用的了。由于微信小程序中无法获取到对应元素的宽度，这个时间只能写死或者根据的长度估算出一个值。

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

哎，再造个轮子吧。

先放个效果：

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

主要原理

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

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

而一直往左滚动的效果，通过css有很多种方式，比如通过改变left, margin-left, tranform: translateX()都可以实现。但是 left 和 margin-left 一般会导致布局的重新计算。使用transform: translateX()性能会更好一些。

主要实现代码

首先，视图模板wxml中：

css3 + animation跑马灯


    
        {{text}} 
        {{text}} 
        {{text}}

这里为了连续无限滚动，特意复制了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/

GPU云服务器云服务器小程序如何实现小程序如何实现直播微信小程序技术实现实现跑马灯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83193.html

SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
前端插件库

摘要：原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库，目的是强化表格操作如搜索排序，并自动加入组件引入表格中，使用非常灵活简便。由推出，灵活扎实的建议列表函数库。原文链接：前端插件库站点：前端开发文档博客：前端插件库前端插件库 DataTables 官网：https://www.datatables.net/ DataTables是jQuery的JavaScr...

高胜山 2019-08-26 13:44 评论0 收藏0
前端插件库

摘要：原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库，目的是强化表格操作如搜索排序，并自动加入组件引入表格中，使用非常灵活简便。由推出，灵活扎实的建议列表函数库。原文链接：前端插件库站点：前端开发文档博客：前端插件库前端插件库 DataTables 官网：https://www.datatables.net/ DataTables是jQuery的JavaScr...

shusen 2019-08-30 10:53 评论0 收藏0
CSS3热身实战--过渡与动画（实现炫酷下拉，手风琴，无缝滚动）

摘要：规定动画的时长。注意子菜单要用隐藏，在显示的时候再设置。如果不加，实际上子菜单，以及子菜单下面的一直在页面上，如果鼠标移上去子菜单，以及子菜单下面的。 1.前言在自己的专栏上写了十几篇文章了，都是与js有关的。暂时还没有写过关于css3的文章。css3，给我的感觉就是，不难，但是很难玩转自如。今天，就用css3来实现三个特效，希望这三个特殊能让大家受到启发，利用css3做出更好，更炫...

zqhxuyuan 2019-08-29 13:03 评论0 收藏0
发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）

摘要：所以我把这个为了区分这个组件包是水平方向的，改名为三基于的文字跑马灯组件大致了解怎么发组件包以后，我们再来看看需要发布出去的组件包怎么写的。一、前言总结下最近工作上在移动端实现的一个跑马灯效果，最终效果如下： showImg(https://segmentfault.com/img/remote/1460000009540502?w=555&h=380); 印象中好像HTML标签的...

edagarli 2019-08-21 15:50 评论0 收藏0