- 需要一个大容器,设置固定宽度,overflow:hidden
- 公告也需要一个容器,设为inline-block
- 动画通过translateX从右往左移动,起点为外层容器的宽度,终点为公告本身的宽度(-100%)
<view class="water_tips">
<view class="water_text">公告公告公告公告公告公告公告公告公告公告公告公告</view>
</view>
.water_tips {
position: absolute;
top: 310rpx;
left: 50%;
transform: translateX(-50%);
width: 664rpx;
height: 40rpx;
line-height: 34rpx;
border-radius: 20rpx;
background: rgba(0, 0, 0, 0.3);
overflow: hidden;
border: 2rpx solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
.water_text {
white-space: nowrap;
display: inline-block;
color: #fff;
font-size: 24rpx;
animation: 10s wordsLoop linear infinite normal;
}
}
@keyframes wordsLoop {
0% {
transform: translateX(664rpx);
}
100% {
transform: translateX(-100%);
}
}