本站长承接,网站搭建,网站美化,wordpress网站速度优化,网站各种疑难杂症,vpn方案,小程序搭建,视频网站解决方案,视频播放器解析源码(带暂停广告,视频广告功能),视频播放跨域,视频直播流解决方案等等,欢迎来聊~
只有你想不到,没有我做不到( •̀ ω •́ )✧ 微信:MRmagg

167素材网

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


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

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


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

<script type="text/javascript " src="/typinyin.js "></script>

网页引入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"  比如

<span id="typinyin_demo"></span>

下面是效果


|

167素材网

Madapang

一个喜欢撸猫,听歌,玩小霸王,睡觉的人。

相关推荐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

CSS+JavaScript网页文字显示打字效果
返回顶部

显示

忘记密码?

显示

显示

获取验证码

Close