css实现文字滚动的效果

原创已于 2024-01-05 11:45:30 修改 · 893 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端

收录于

于 2024-01-05 11:34:58 首次发布

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何利用CSS动画技术在HTML中实现文字自动滚动效果，给出了相应的HTML结构和CSS关键帧定义。

使用css动画实现文字自动滚动，实现代码如下

HTML代码

css代码

完整代码：

<html>
<head> 
<meta charset="utf-8">
</head>
<body>

<p class="scroll">你好，这是一行可以滚动的文字。</p>
	
</body>
</html>
<style>
.scroll{
	color:#ccddff;
	font-size:24px;
	overflow:hidden;
	white-space:nowrap;
	animation: scroll 5s linear infinite;
}
@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>