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


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 相关文章推荐
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
原生js代码能实现call和bind吗
2019/07/31 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python获取系统默认字符编码的方法
2015/06/04 Python
python如何读写json数据
2018/03/21 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
python实现随机加减法生成器
2020/02/24 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
公司员工检讨书
2014/02/08 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
golang 实用库gotable的具体使用
2021/07/01 Golang
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript