CSS+JavaScript网页文字显示打字效果

CSS 4年前 0 2.9K

首先引入typinyin.js这个文件（文件我会打包在下面）

网页引入javascrpit输入以下代码（文字自己替换）

window.onload = function() {
	var demo = new Typinyin();
	demo.attach('#typinyin_demo'); // 绑定元素
	demo.setOptions({
		sentences: [{
			ch: [{
				pause: 3000
			} /* 暂停3000毫秒 */ , "欢迎", "来到", "MDP BLOG?"],
			py: ["", "huanying", "laidao", "MDP BLOG", "?"],
		}, {
			ch: ["这就是", "这个", "打字效果", "的演示"],
			py: ["zhejiushi", "zhege", "dazibbxiaobbbguo", "deyanbbbdfgdfbbbbbbbbshi"], // 用"b" 来删除一个字符
		}, {
			ch: ["这", "篇文章", "就到这里啦", "(ง •_•)ง"],
			py: ["zhe", "pianwenzhang", "jiudaozhelila", "(ง •_•)ง"],
		},  {
			ch: [ "ヾ(•ω•`)o", "拜拜", "！"],
			py: ["ヾ(•ω•`)o", "baibai", "！"]
		}], // 需要输入的句子
		startDelay: 1000, // 启动延时，以毫秒记
		typeSpeed: 100, // 打字速度，以毫秒记
		pause: 1000, // 每一句话打完后的停顿时间，以毫秒记
		backSpeed: 60, // 删除文字的速度，以毫秒记
		cursorChar: "|", // 光标字符
		loop: false, // 是否循环播放
	});
	demo.init(); // 初始化并开始打字
}

文字自行修改

网页引入css

.typing-cursor {
	opacity: 1;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}

@keyframes blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes blink {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

在需要的效果的标签加 id="typinyin_demo" 比如