<div class="actMsg">
<div class="actMsgLeft">
//這個地方放的小圖標(biāo)
<img
src="xxx"
/>
</div>
<div class="actMsgRight">
<div class="scroll"
>活動公告：本次活動紅包到賬時間會出現(xiàn)延遲情況群凶，具體到賬時間請您關(guān)注微信余額到賬通知。</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%);
}
}
}
