web前端之多行文本擦除效果、文本逐个显示或展示、创建元素标签、querySelector、createElement、appendChild、requestAnimationFrame
warning:
这篇文章距离上次修改已过282天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text-erase {
/* 设置文字的初始透明度为0 */
opacity: 0;
/* 设置动画名称和时长 */
animation: fadeIn 3s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="text-container"></div>
<script>
// 定义要展示的文本数组
const texts = ["文本1", "文本2", "文本3"];
// 获取文本容器
const container = document.getElementById("text-container");
// 循环展示文本
texts.forEach((text, index) => {
// 创建一个新的span元素
const span = document.createElement("span");
// 添加文字擦除的CSS类
span.classList.add("text-erase");
// 设置文本内容
span.textContent = text;
// 如果不是第一个文本，添加一个换行元素
if (index > 0) {
container.appendChild(document.createElement("br"));
}
// 将span添加到容器中
container.appendChild(span);
});
</script>
</body>
</html>这段代码首先定义了一个包含文本的数组，然后通过遍历这个数组，为每个文本创建一个<span>元素，并添加一个CSS类来实现擦除效果。每个<span>元素和换行元素都会被动态添加到页面的#text-container元素中。这样，当页面加载时，文本会逐个显示出来，并且具有擦除入场的动画效果。
评论已关闭