数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 JavaScript 和 CSS 实现打字和删除效果
借助 CSS 动画，我们可以使用 JavaScript 创建打字机打字和删除效果。无限循环效果也已设置。自定义函数将被调用，并且文字将以该效果显示。最后，这些文字将使用另一个自定义函数删除。
为文本和光标设置一个 div
首先，使用 <p> 元素设置一个父 div 容器。其中一个 <p> 将包含文本，另一个包含光标。
<div> <p id="text"></p> <p>|</p> </div>
设置 <p> 元素的样式
为文本设置专业字体：
p {
font-family: "Courier Monospace";
font-size: 2em;
color: red;
}
“:last-of-type” 选择器
要匹配其父元素的最后一个子元素，请使用“:last-of-type”选择器。为其父元素的最后一个 <p> 元素设置动画：
p:last-of-type {
animation: type 0.33s infinite;
}
上面，动画名称为 type，它使用关键帧设置动画规则。这里，使用 opacity 属性设置不透明度：
@keyframes type{
to { opacity: .0; }
}
初始文字
设置以下文字，页面加载时将以打字效果进行动画：
const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."];
页面加载
页面加载时调用自定义函数进行打字：
function typeNow() {
let word = words[i].split("");
var loopTyping = function() {
if (word.length > 0) {
document.getElementById('text').innerHTML += word.shift();
} else {
deleteNow();
return false;
};
counter = setTimeout(loopTyping, 200);
};
loopTyping();
};
对于删除效果：
function deleteNow() {
let word = words[i].split("");
var loopDeleting = function() {
if (word.length > 0) {
word.pop();
document.getElementById('text').innerHTML = word.join("");
} else {
if (words.length > (i + 1)) {
i++;
} else {
i = 0;
};
typeNow();
return false;
};
counter = setTimeout(loopDeleting, 200);
};
loopDeleting();
};
超时
为了使打字和删除效果正常工作，调用了 setTimeout() 函数。以下代码适用于这两个事件，即输入和删除字母时：
counter = setTimeout(loopDeleting, 200);
示例
以下示例显示此效果：
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
margin: 4%;
padding: 2%;
box-shadow: inset 0 0 12px blue;
}
p {
font-family: "Courier Monospace";
font-size: 2em;
color: red;
}
p:last-of-type {
animation: type 0.33s infinite;
}
@keyframes type{
to { opacity: .0; }
}
</style>
</head>
<body>
<div>
<p id="text"></p>
<p>|</p>
</div>
<script>
const words = ["Nulla", "facilisi", "Cras sed odio sed leo laoreet molestie id non purus.."];
let i = 0;
let counter;
function typeNow() {
let word = words[i].split("");
var loopTyping = function() {
if (word.length > 0) {
document.getElementById('text').innerHTML += word.shift();
} else {
deleteNow();
return false;
};
counter = setTimeout(loopTyping, 200);
};
loopTyping();
};
function deleteNow() {
let word = words[i].split("");
var loopDeleting = function() {
if (word.length > 0) {
word.pop();
document.getElementById('text').innerHTML = word.join("");
} else {
if (words.length > (i + 1)) {
i++;
} else {
i = 0;
};
typeNow();
return false;
};
counter = setTimeout(loopDeleting, 200);
};
loopDeleting();
};
typeNow();
</script>
</body>
</html>
更新于：2024年1月2日
2K+ 次浏览
广告