一、使用marquee实现
marquee标签是HTML标签中创建文字滚动的标签
<marquee behavior="scroll" direction="left">我是滚动内容</marquee>
二、antd 组件
1、pc端:
2、app端:ant design mobile
三、Css animation实现
<div className={styles.broadcast}>
<NotificationTwoTone className="text-xl" />
<div className={styles.broadcast__wrap}>
<div className={styles['broadcast__wrap--list']}>
{infoList.map((item) => (
<span className={styles['broadcast__wrap--item']} key={item.id}>
{item.bcMsg}
{item.url && (
<a target="_blank" href={item.url} className="ml-2">
查看详情
</a>
)}
</span>
))}
</div>
</div>
<CloseOutlined className="hover:text-blue" onClick={closeMarquee} />
</div>
.broadcast {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 40px;
background: @blue-c2;
.broadcast__wrap {
flex: 1;
margin: 0 16px;
width: calc(100% - 200px);
overflow: hidden;
.broadcast__wrap--list {
height: 22px;
display: flex;
flex-wrap: nowrap;
width: fit-content;
animation: marquee 50s linear infinite;
animation-play-state: running;
// 悬浮暂停
&:hover {
animation-play-state: paused;
}
.broadcast__wrap--item {
display: inline-block;
text-align: left;
white-space: nowrap;
}
.broadcast__wrap--item + .broadcast__wrap--item {
margin-left: 200px;
}
}
}
@keyframes marquee {
0% {
transform: translateX(calc(100vw - 200px));
}
100% {
transform: translateX(-100%);
}
}
}