wxss中的@keyframes中的长宽之类带单位的,不能用百分比。如下代码,一开始margin-left用的是200%,找了半天才发现是单位的错误。
<view class="news">
<view><image src="../../img/喇叭.png" style="width:40rpx;height:40rpx;"></image></view>
<view class='news-desc-roll'>通知:受全国疫情影响,湖北地区快递停发,其他省份基本可以正常发货,如略有延迟,给您带来不便敬请大家谅解~</view>
</view>
样式如下:
.news{
width: 750rpx;
height: 60rpx;
line-height: 60rpx;
display: flex;
white-space: nowrap;
background: rgb(255, 248, 233);
overflow: hidden;
}
.news-desc-roll {
width: 2092rpx;
height: 60rpx;
font-size: 30rpx;
white-space: nowrap;
line-height: 60rpx;
color: #999;
animation:roll 10s linear infinite;
}
@keyframes roll {
0% {margin-left:700rpx}
100%{margin-left: -2092rpx}
}