<html>
<head>
<style>
.scroll-text {
white-space: Nowrap; /* 让文本不换行 */
overflow: hidden; /* 隐藏超出部分 */
animation: scroll 10s linear infinite; /* 设置滚动动画 */
}
@keyframes scroll {
from { transform: translateX(0); } /* 从0开始 */
to { transform: translateX(-100%); } /* 滚动至最左侧 */
}
</style>
</head>
<body>
<p class="scroll-text">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</body>
</html>
2. 使用CSS样式设置p标签的white-space属性为Nowrap，可以让文本在一行中显示，同时使用overflow属性隐藏超出部分。
3. 使用CSS3的animation属性设置滚动动画，通过0到-100%的平移来滚动文本。
这样就可以实现从左到右滚动的文本效果了。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
