纯css实现的跑马灯动画
const SytledWrapper = styled.div`
width:300px;
height: 50px;
margin: 0 auto;
overflow: hidden;
position: relative;
`
const animationLeft = keyframes`
from{
left:var(--startPos);
}
to{
left:var(--stopPos);
}
`
const StyledScrollDiv = styled.div<{count:number}>`
min-width: 100px;
height: 50px;
display: flex;
position: absolute;
top: 0;
animation: ${({count})=>count * 1}s ${animationLeft} linear infinite;
--startPos:${({count})=>0}px;
--stopPos:${({count})=>-(count >= 3 ? (count-3)*100 : 0)}px;
`
const StyledTe