.typing {
字体大小:1快速眼动;
padding-top: 6%;
margin-bottom: 5%;
粗细:正常;
字母间距:.3rem;
-webkit-animation: type 2 s步骤(50岁)转发;
动画:type 2 s步骤(50岁)转发;
}
.typing-item {
text-align:中心;
颜色:黑色;
宽度:100%;
空白:nowrap;}
溢出:隐藏;
}
@-webkit-keyframes类型{
从{宽度:0;}
}
@keyframes类型{
从{宽度:0;}
}
缺点:只能实现一行式的打字效果,无法打出一段落文字
html代码:
& lt; div类=拔谋救萜鳌北?
& lt;跨类=" text-static "祝辞& lt;/span>
& lt;跨类="文本"祝辞& lt;/span>
& lt;跨类=肮獗辍弊４莬 & lt;/span>
& lt;/div>
jquery代码:
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/js/jquery.js "祝辞& lt;/script>
& lt; script>
$(函数(){
myPrint([“你好我的话!”),100);
速度函数myPrint (arr) {
var指数=0;
var str=arr(指数);
var=0;
var添加=true;
var mySetInterval=setInterval(函数(){//延时4个字符的时间
如果(i==str.length + 4) {
添加=false;//如果是最后一个字符串则终止循环函数
如果(指数+ 1祝辞=arr.length) {
clearInterval (mySetInterval);
}
}如果(我==2){//删除后延时2个字符的时间
添加=true;
str=arr(+ +指数);
}
setTimeout(函数(){
如果(add) {
我+ +;
$ ("。text ") . html (str。substring (0, 1));
其他}{
$ ("。text ") . html (str。substring (0 - 1));
我,;
}
})
},速度)
}
})
& lt;/script>
html代码:
& lt; div类=澳谌荨北?
& lt; div类="内容div "比;
& lt;跨度id="内容项"祝辞& lt;/span>
& lt;/div>
& lt;/div>
& lt;输入类型=耙亍眎d=澳谌荨眝alue=" https://www.yisu.com/zixun/内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容”/祝辞
引入Typed.js, Typed.js内容如下
//麻省理工学院许可证(麻省理工学院)//类型。js |版权(c) 2014年马特Boldt | www.mattboldt.com//特此授予许可,免费的,任何的人获得一份//这个软件和相关文档的文件(“软件”),交易//在软件没有限制,包括但不限于权利//使用、复制、修改、合并、出版、发行、有偿和/或出售//复制的软件,并允许他们的软件//装饰,应当具备下列条件://上面的版权声明和本许可声明应当包含在//所有副本或实质性部分的软件。//提供的软件是“是”,没有任何类型的保证,明示或//暗示的保证,包括但不限于适销性的保证,//健身为特定目的和无侵犯。在任何事件应当的//作者或版权所有者承担任何索赔、损害或其他//责任,无论是在合同,侵权或否则,因,//或与软件或使用或其他交易//软件。
！ 函数(美元){
“使用严格的”;
var类型=函数(el、期权){//选择元素操作文本
这一点。el=$ (el);//选项
这一点。选项=$。扩展({},.fn.typed.defaults美元,选项);//属性类型
这一点。isInput=this.el.is(“输入”);
这一点。attr=this.options.attr;//显示光标
这一点。showCursor=sInput & # 63;假:this.options.showCursor;//文本内容的元素
这一点。elContent=ttr & # 63;this.el.attr (this.attr): this.el.text ()//html或纯文本
这一点。contentType=this.options.contentType;//打字速度
这一点。typeSpeed=this.options.typeSpeed;//添加一个延迟输入开始前
这一点。startDelay=this.options.startDelay;//回退的速度
这一点。backSpeed=this.options.backSpeed;//返回之前等待的时间
这一点。backDelay=this.options.backDelay;//输入字符串的文本
这一点。字符串=this.options.strings;//当前字符串的字符数的位置
这一点。大小写敏感=0;//当前数组的位置
这一点。arrayPos=0;//停止退回数量/祝辞”)
this.el.remove ();
如果(typeof。光标!==ㄒ濉?{
this.cursor.remove ();
}//发送回调
self.options.resetCallback ();
}
};
.fn美元。类型=function(选项){
返回this.each(函数(){
var $=$ (),
data=https://www.yisu.com/zixun/this.data美元(“类型化”),
选择=typeof选项==韵蟆?,选择;
如果美元(!数据)。数据(“类型”(data=https://www.yisu.com/zixun/new类型(这个选项)));
如果(typeof选项=='字符串')数据[选项]();
});
};
$ .fn.typed.defaults={
字符串(“这是默认值:……”:“你知道你应该做# 63;”“使用自己的!”,“你有美好的一天!”),//打字速度
typeSpeed: 0,//时间开始打字
startDelay: 0,//回退的速度
backSpeed: 0,//洗牌的字符串
洗牌:假的,//时间退回
backDelay: 500,//循环
循环:假的,//错误=无限
loopCount:假的,//显示光标
showCursor:没错,//字符指针
cursorChar:“|”,
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
