<divid="app">

<divclass="top">

<p>

<spanclass="tips">由于大促期间订单量激增，您的订单送达时效可能出现延迟，请您耐心等待~</span>

<span>由于大促期间订单量激增，您的订单送达时效可能出现延迟，请您耐心等待~</span>

</p>

</div>

<divclass="main">

<h6>然后这里放的就是卤煮</h6>

<h4>外放堪称手机圈</h4>

<h2>宇宙无敌第一</h2>

<h6>小米10Pro</h6>

<h2>wo不接受争辩</h2>

<h3>·</h3>

<h3>·</h3>

<h3>·</h3>

<h3>·</h3>

</div>

</div>

css部分：

.tips{

width:560px;

}

p{

position:absolute;

height:34px;

left:34px;

white-space:nowrap;

display:flex;

animation:movelinear12sinfinite;

animation-delay:3s;

}

@keyframesmove{

0%{left:34px;}

100%{left:-526px;}

}

/*这里以下请忽略，重点在上面*/

*{margin:0;padding:0;}

body,html{height:100%;}

#app{

height:100%;

background:#ececec;

margin:0auto;

display:flex;

flex-direction:column;

}

.main{

flex:1;

}

.top{

position:relative;

overflow:hidden;

height:34px;

background:#fff;

}

.topspan{

line-height:34px;

display:inline-block;

}

.top::before{

content:"";

position:absolute;

left:0;

top:0;

height:100%;

width:34px;

z-index:9;

background-image:linear-gradient(90deg,#f000%,#f0060%,transparent100%);

}

.top::after{

content:"";

position:absolute;

right:0;

top:0;

height:100%;

width:34px;

z-index:9;

background-image:linear-gradient(-90deg,#f000%,#f0060%,transparent100%);

}

h1,h2,h3,h4,h5,h6{

margin:20pxauto;

text-align:center;

}