微信小程序实现跑马灯效果(完整代码)
2018-09-13 10:26
1526 查看
在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图:
Wxml代码:
[code]<!--跑马灯 Linyufan.com--> <view class="marquee_container" style="--marqueeWidth--:-12em"> <view class="marquee_text">一个人活着就是为了让更多的人更好的活着!</view> </view> <!--跑马灯-->
Wxss代码:
[code]/*首页跑马灯效果*/ @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; } /*首页跑马灯效果*/
参考小程序:
阅读更多
相关文章推荐
- 微信小程序实现跑马灯效果完整代码(附效果图)
- 微信小程序 跑马灯效果完整代码附效果图
- 微信小程序五星评分效果实现代码
- [微信小程序]手指触摸动画效果(完整代码附效果图)
- 微信小程序左滑删除效果的实现代码
- 微信小程序实现跑马灯效果
- [微信小程序]动画,从顶部掉花的效果(完整代码附效果图)
- 微信小程序 实现tabs选项卡效果实例代码
- [微信小程序]实现列表点赞并让当前节点的图片改变,值加1完整实例代码加GIF图
- 微信小程序源码大集004---小程序实现大转盘 仿天猫抽奖 跑马灯效果(有图有源码)
- [置顶] 微信小程序实现tabs选项卡效果简单代码实例
- [微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
- 微信小程序局部刷新触发整页刷新效果的实现代码
- 微信小程序实现文字跑马灯效果
- 微信小程序多张图片和表单一起上传,验证表单及进度条的实现完整代码
- 微信小程序实现顶部普通选项卡效果(非swiper)
- 微信小程序收藏功能的实现代码
- 微信小程序车牌号码模拟键盘输入功能的实现代码
- 微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败)