<view class="tip" >
<image class="tipPic" src=""></image>
<view class="tipTxt">
<view class="tipTxt1">滚动文字</view>
</view>
</view>
.tip{
height: 34px;
padding: 0px 24rpx;
background: #FFF2F2;
color: #FE1D2D;
font-size: 26rpx;
display: flex;
align-items: center;
}
.tipPic{
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
.tipTxt{
flex: 1;
overflow: hidden;
white-space: nowrap;
}
.tipTxt1{
animation: 10s loop linear infinite normal;
display: inline-block;
}
@keyframes loop {
0% {
transform: translateX(350px);
-webkit-transform: translateX(350px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes loop {
0% {
transform: translateX(350px);
-webkit-transform: translateX(350px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
参考:https://blog.csdn.net/qq_48085286/article/details/122510027