<div class="actMsg">
<div class="actMsgLeft">
//这个地方放的小图标
<img
src="xxx"
/>
</div>
<div class="actMsgRight">
<div class="scroll"
>活动公告：本次活动红包到账时间会出现延迟情况，具体到账时间请您关注微信余额到账通知。</div>
</div>
</div>
.actMsg {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 90.26vw;
height: 7.86vw;
//背景图
background: url("xxxx")
no-repeat;
background-size: 100% 100%;
.actMsgLeft {
margin-top: -20rpx;
width: 2.93vw;
height: 2.93vw;
image {
width: 100%;
height: 100%;
}
}
.actMsgRight {
margin-left: 1.333vw;
width: 78.33vw;
overflow: hidden;
font-family: PingFang SC;
font-size: 13px;
font-weight: normal;
letter-spacing: 0em;
color: #fef005;
//最主要的是下面这些样式
.scroll {
white-space: nowrap;
animation: scrollNotice 15s linear infinite;
}
}
@keyframes scrollNotice {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-180%);
}
}
}
