CSS3实现文字循环滚动播放

小肉包de

已于 2023-02-23 10:57:06 修改

阅读量3.7k

点赞数 7

分类专栏： CSS 文章标签： css3 前端

于 2023-02-23 10:35:22 首次发布

本文链接：https://blog.csdn.net/weixin_47160442/article/details/129176317

版权

CSS 专栏收录该内容

10 篇文章

订阅专栏

该示例展示了如何使用CSS3的动画功能来创建文字循环滚动的效果。通过定义`@keyframes`和`animation`属性，配合`transform:translateY`实现内容的平滑滚动。当鼠标悬停在文本上时，动画暂停，提供了交互性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3实现文字循环滚动播放

效果图：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS3实现文字滚动播放</title>

	<style type="text/css">
		.animate-box {
			width: 500px;
			height: 60px;
			overflow: hidden;
			background-color: lightblue;
		}

		.animate {
			font-family: Source Han Sans CN;
			color: #000;
			font-size: 14px;
			animation: 6s wordsLoop linear infinite normal;
		}

		@keyframes wordsLoop {
			0% {
				transform: translateY(0);
				-webkit-transform: translateY(0);
			}

			100% {
				transform: translateY(-100%);
				-webkit-transform: translateY(-100%);
			}
		}

		@-webkit-keyframes wordsLoop {
			0% {
				transform: translateY(0);
				-webkit-transform: translateY(0);
			}

			100% {
				transform: translateY(-100%);
				-webkit-transform: translateY(-100%);
			}
		}

		.animate:hover {
			animation-play-state: paused;
		}
	</style>
</head>

<body>
	<div class="animate-box">
		<p class="animate">
			这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容,这里是要滚动的内容
		</p>
	</div>

</body>

</html>

CSS3 动画

CSS3 动画文档看这里