【前端基础】文字逐渐显示效果

最新推荐文章于 2024-07-04 00:59:27 发布

十贰_

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量394

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/qq_39224105/article/details/137500894

版权

本文介绍了如何通过HTML和CSS创建一个文本揭示效果，使文字逐步滑入页面，提供了一种新颖的动态加载文本的方式。

摘要由CSDN通过智能技术生成

<!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>Document</title>
		<style>
			.text-reveal {
				overflow: hidden;
				/* 确保超出部分不显示 */
				white-space: nowrap;
				/* 防止文本换行 */
				animation: slide-in 10s forwards;
				/* 动画名称，持续时间，填充模式 */
				writing-mode: vertical-lr;
				height: 500px;
			}

			@keyframes slide-in {
				from{
					height: 0%;
				}
				to {
					height: 500px;
					/* 动画结束时，显示全部文本 */
				}
			}
		</style>
	</head>

	<body>
		<div class="text-reveal">
			您好，我是一个慢慢出现的文字。您好，我是一个慢慢出现的文字。您好，我是一个慢慢出现的文字。您好，我是一个慢慢出现的文字。
		</div>
	</body>

</html>