<div class="marquee"> <span>这里是需要滚动的文本</span> </div> <style> .marquee { display: inline-block; white-space: nowrap; overflow: hidden; } .marquee span { display: inline-block; animation: marquee 10s linear infinite; } @keyframes marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } } </style>
在这个示例中，将包含文本的
div元素设置为display: inline-block，使其仅占用所需宽度。使用white-space: nowrap和overflow: hidden属性确保文本不会换行或溢出。然后，使用CSS动画和关键帧来定义滚动效果。使用
translateX()函数将文本平移，从而创建滚动效果。调整animation属性值中的时间以更改滚动速度，并修改from和to关键帧的位置来改变滚动方向。
