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


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字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
JS辨别访问浏览器判断是android还是ios系统
Aug 19 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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图片验证码代码
2008/03/27 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
Python实现的金山快盘的签到程序
2013/01/17 Python
python 读入多行数据的实例
2018/04/19 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python线程中同步锁详解
2018/04/27 Python
python DataFrame 取差集实例
2019/01/30 Python
python根据文本生成词云图代码实例
2019/11/15 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
django列表筛选功能的实现代码
2020/03/27 Python
Python urllib3软件包的使用说明
2020/11/18 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
公务员政审个人鉴定
2014/02/25 职场文书
主办会计岗位职责
2014/03/13 职场文书
留守儿童工作方案
2014/06/02 职场文书
员工离职感谢信
2015/01/22 职场文书
明星邀请函
2015/02/02 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python