微信小程序 实用的公告栏滚动效果

首先先来看页面代码. （不知道什么原因 打出来的代码不显示，所以在这里用图片表示 抱歉.）

ps. class自己可以另定义名字，方便自己以后修改.

接下来就是正题了，咱们来看样式是怎么定义的.

.srcoll_view{
position: absolute; top:16rpx;
height: 100rpx; margin-left: 0px;
font-size: 30rpx; font-weight: 550;
white-space: nowrap;
color:rgb(235, 44, 44);
animation:myfirst 8s linear infinite;
/滚动的速度/
}
@keyframes myfirst{
0% {margin-left:750rpx;} 100% {margin-left:-1000rpx; margin-left: 100rpx;}
/滚动的位置到哪里/
}
.scroll_view_border{
position: relative; width: 100%; background: rgba(0, 0, 0, 0.2);
height: 100rpx; overflow: hidden;
align-content: center;
}

（样式可自行根据需要来修改.）