跑马灯动画

最新推荐文章于 2025-03-16 20:34:21 发布

撅腚的duck

最新推荐文章于 2025-03-16 20:34:21 发布

阅读量239

点赞数 1

文章标签：动画 css3 css

本文链接：https://blog.youkuaiyun.com/weixin_57157114/article/details/123108897

版权

本文介绍如何使用CSS3实现跑马灯动画，通过计算数组长度确定动画时长，并通过修改动画关键帧实现左右动画切换。详细解释了startPos的设置原因，以及为何在结束位置设置为count-3，以达到无缝轮播的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯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 StyledTextDiv = styled.div<{backgroundColor:string}>`
  width: 100px;
  height: 50px;
  line-height:50px;
  text-align:center;
  font-size:20px;
  font-weight:bold;
  background:${({backgroundColor})=>backgroundColor};
`


export const MonMarketEndView: React.FC = () => {
    const backgroundColorList = useMemo(() => {
        return [
            { color: 'pink' },
            { color: 'green' },
            { color: 'red' },
            { color: 'blue' },
        ]
    }, [])
    const scrollList = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
    return (
        <SytledWrapper>
            <StyledScrollDiv count={scrollList.length}>
                {scrollList.map((info,index)=>(
                    <StyledTextDiv backgroundColor={backgroundColorList[info%4].color}>
                        {info}
                    </StyledTextDiv>
                ))}
            </StyledScrollDiv>
        </SytledWrapper>
    )
}

在这里插入图片描述

利用数组的长度，算出动画时长count*1s
在这里插入图片描述
animationLeft指的是向左的动画，通过改版from里面的值来改变动画的效果，比如把left改变为right就是向右的动画啦，var括号里面的是声明的是开始和结束变量，可以是任何名字的

–startPos将开始的动画设置为left:0px，然后结束的动画为什么要设置count-3呢？是怎么算出来的呢？
用数组的长度可显示的长度，可显示的长度为300px，然后一个元素为100px也就是说可以显示3个，所以要减去三，不减去3可以吗？可以的不减去3的话结尾就会留白，减3的目的只是增加了视觉效果，轮播完成后面不会留白