微信小程序实现跑马灯效果（完整代码）

在微信小程序里实现跑马灯效果，类似滚动字幕或者滚动广告之类的，使用简单的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;
}
/*首页跑马灯效果*/

参考小程序：

微信小程序实现跑马灯效果（完整代码）相关推荐

c语言小程序跑马灯,微信小程序实现跑马灯效果（完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码:一个人活着就是为了让更多的人更好的活着! Wxss代码:/*首页跑马灯 ...
java 走马灯程序,详解微信小程序实现跑马灯效果（附完整代码）
在微信小程序里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS,效果如下图: Wxml代码: 一个人活着就是为了让更多的人更好的活着! Wxss代码: /*首页跑 ...
微信小程序实现跑马灯效果(自定义组件详解)
首先看一下效果吧首先我们在项目根目录建一个公共文件夹,这里我命名为components 在components里面创建一个组件, dt-horse-race-lamp > index 最后 ...
微信小程序文字跑马灯效果
1.样式 /*首页跑马灯效果开始*/ .container_marquee {display: flex;flex-direction: column;justify-content: space-b ...
[微信小程序]手指触摸动画效果(完整代码附效果图)
微信小程序开发交流qq群 173683895 本文共有两个示例,先上图示例一: 示例二: 示例一代码(微信小程序): // pages/test/test.js Page({container ...
微信小程序跑马灯效果完整代码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一:功能介绍及讲解实现的跑马灯(跑马灯里面显示文章的title)的效果,并在右侧有个查看文章的按钮, ...
微信小程序转发分享打电话功能,完整代码附效果图
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 按钮绑定在页面内发起转发事件onShareApp:(注意这里是button 并且给他设置了open-t ...
微信小程序配置支付（附完整代码）
微信小程序配置支付 1. 微信支付官网配置项 2. 代码配置(登录.获取openId.拉起支付等) 3. 云开发示例 1. 微信支付官网配置项初次接入,商户号管理是没有数据的,需要申请接入. 如果是 ...
微信小程序支付 php后台对接完整代码
这个代码全是干货呀,拿过来可以直接使用.小程序在调起微信支付之前需要5个参数,这时候就需要携带code向后台请求,然后后台根据code获取openid 再进行服务器之间的.... 一.准备工作 1.小 ...

微信小程序实现跑马灯效果（完整代码）

微信小程序实现跑马灯效果（完整代码）相关推荐

最新文章

热门文章