CSS3实现文字循环滚动播放-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS3实现文字循环滚动播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSS3实现文字循环滚动播放

效果图：

css文字循环滚动效果,CSS,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>