用html和css和js写一个文字逐个输出的动画,用一个html文件表示,写在一个html文件里面,不要分文件
时间: 2023-04-11 21:02:29 浏览: 88
html+css+js动画特效
好的,这个问题我可以回答。以下是一个简单的文字逐个输出的动画的 HTML、CSS 和 JavaScript 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字逐个输出动画</title>
<style>
#text {
font-size: 24px;
font-weight: bold;
color: #333;
white-space: pre;
overflow: hidden;
}
</style>
</head>
<body>
<div id="text"></div>
<script>
var text = "这是一个文字逐个输出的动画。";
var index = 0;
var timer = setInterval(function() {
document.getElementById("text").innerHTML = text.substring(0, index);
index++;
if (index > text.length) {
clearInterval(timer);
}
}, 100);
</script>
</body>
</html>
```
这个代码会在页面上显示一个文字逐个输出的动画,文字内容为“这是一个文字逐个输出的动画。”。每隔 100 毫秒,JavaScript 代码会将文字的前缀逐渐增加,直到输出完整个文字。CSS 样式中的 `white-space: pre;` 和 `overflow: hidden;` 可以保证文字逐个输出时不会出现换行或滚动条。
阅读全文