详解微信小程序实现跑马灯效果(附完整代码)


Posted in Javascript onApril 29, 2019

在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图:

详解微信小程序实现跑马灯效果(附完整代码)

Wxml代码:

<!--跑马灯 Linyufan.com-->
<view class="marquee_container" style="--marqueeWidth--:-12em">
  <view class="marquee_text">一个人活着就是为了让更多的人更好的活着!</view>
</view>
<!--跑马灯-->

 Wxss代码:

/*首页跑马灯效果*/
@keyframes around {
 from {
  margin-left: 100%;
 }
 to {
  /* var接受传入的变量 */
  margin-left: var(--marqueeWidth--);
 }
 }
 
.marquee_container{
 background-color: #fe4655;
 height: 50rpx;
 line-height: 44rpx;
 position: relative;
 width: 100%;
 margin-top:0rpx;
}
.marquee_container:hover{
 /* 不起作用 */
 animation-play-state: paused;
}
.marquee_text{
 color:#fff;
 font-size: 28rpx;
 display: inline-block;
 white-space: nowrap;
 animation-name: around;
 animation-duration: 10s; /*过渡时间*/
 animation-iteration-count: infinite;
 animation-timing-function:linear;
}
/*首页跑马灯效果*/

以上所述是小编给大家介绍的微信小程序跑马灯效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
详解javascript常用工具类的封装
Jan 30 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
JS实现多选框的操作
Jun 24 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 #Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 #Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 #Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 #Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 #Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 #Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 #Javascript
You might like
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
Bootstrap精简教程
2015/11/27 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python解析nginx日志文件
2015/05/11 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
python实现词法分析器
2019/01/31 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
pandas中ix的使用详细讲解
2020/03/09 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
优秀教师申报材料
2014/12/16 职场文书
表彰大会新闻稿
2015/07/17 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB