<div class="td-style"> <span class="td-text">内容1内容1内容1内容1内容1内容1</span> </div> css: <style> .td-style { width: 160px; height: 72px; overflow: hidden; white-space: nowrap; font-size: 26px; line-height: 72px; } .td-text { display: inline-block; white-space: nowrap; animation: scrollLeft 3s linear infinite; } .td-text:hover { animation-play-state: paused; } /* 定义动画 */ @keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-90% - 0px)); /* 加上一些额外的空白,以便滚动到最后一个元素时不会立即切换 */ } } </style>