uni-app开发小程序时遇到个需求：跑马灯
非小程序改一下标签也是可用的
因文案长度不同，可以自行调整 --marqueeWidth--，from { margin-left：}，.confirm_tips_text{margin: 0 140rpx 0 0;} 这三个值，慢慢调哈
<view v-if="isConfirm" class="confirm_tips_top" style="--marqueeWidth--:-20em">
<view class="confirm_tips_content">
<view class="confirm_tips_text">*已超过确认时间，当前确认可能会在次月打款</view>
<view class="confirm_tips_text">*已超过确认时间，当前确认可能会在次月打款</view>
</view>
</view>
<style scoped>
/*首页跑马灯效果*/
@keyframes around {
from {
margin-left: 20%
}
to {
/* var接受传入的变量 */
margin-left: var(--marqueeWidth--);
}
}
.confirm_tips_top{
position: fixed;
top: 0;
right: 0;
left: 0;
height: 48rpx;
line-height: 48rpx;
color: #FC753B;
font-size: 24rpx;
font-weight: 500;
font-family: PingFangSC-Medium, PingFang SC;
background-color: #FFF1EB;
z-index: 30;
}
.confirm_tips_top:hover{
/* 不起作用 */
animation-play-state: paused;
}
.confirm_tips_content{
white-space: nowrap;
animation-name: around;
animation-duration: 6s; /*过渡时间*/
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.confirm_tips_text{
display: inline-block;
margin: 0 140rpx 0 0;
}
</style>
