移动app实现文字无限滚动

iimmhy

于 2021-04-14 10:12:03 发布

阅读量288

点赞数

本文链接：https://blog.csdn.net/WliU_LI/article/details/115691221

版权

移动App 文字滚动 CSS动画关键帧前端开发

关键词由CSDN通过智能技术生成

移动app实现文字无限滚动

      <div
        className="border-2 border-f9c340 rounded-md overflow-hidden w-full"
        style={{ width: "500px" }}>
        <Word>
          我是滚动的文字我是滚动的文字我是滚动的文字我是滚动的文字我是滚动 
        </Word>
      </div>
      
const Word = styled.div`
  font-size: 20px;
  white-space: nowrap;
  color: orange;
  display: inline-block;
  @keyframes move {
    0% {
      transform: translateX(500px);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  animation: move 5s linear infinite;
`;