Kapture 2022-08-26 at 23.52.18.gif

    1. function App() {
    2.   return (
    3.     <div className="App">
    4.       <div>利用CSS实现超长内容滚动播放</div>
    5.       <div className='scroll-wrap'>
    6.         <div className='scroll-left-right'>长内容长内容长内容</div>
    7.       </div>
    8.     </div>
    9.   );
    10. }
    1. .scroll-wrap{
    2.   margin: 50px;
    3.   width: 100px;
    4.   height: 1.4em;
    5.   overflow: hidden;
    6.   white-space: nowrap;
    7.   border: 1px solid black;
    8.   position: relative;
    9. }
    11. .scroll-left-right{
    12.   position: absolute;
    13.   left: 100%;
    14.   transform: translateX(-100%);
    15.   animation-name: left-right;
    16.   animation-iteration-count: infinite;
    17.   animation-duration: 3s;
    18. }
    20. @keyframes left-right {
    21.   0% {
    22.     left: 0;
    23.     transform: translateX(0%);
    24.   }
    25.   10% {
    26.     left: 0;
    27.     transform: translateX(0%);
    28.   }
    29.   50% {
    30.     left: 100%;
    31.     transform: translateX(-100%);
    32.   }
    33.   60%{
    34.     left: 100%;
    35.     transform: translateX(-100%);
    36.   }
    37.   100% {
    38.     left: 0;
    39.     transform: translateX(0%);
    40.   }
    41. }

    参考 https://mp.weixin.qq.com/s/BAlijJ-t5PKetbU53Ge-yg