web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
其他
超逼真的控制台打字jQuery特效
分类:
其他
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
##### HTML结构 该打字特效的HTML结构使用一个空的div来制作即可。 ```html
``` ##### CSS样式 为了效果更加逼真,你可以为这个打字效果添加一些CSS样式。 ```html body { width: 100%; margin: 0px; font-family: 'Helvetica Neue'; background-color: #020202; } .terminal { width: 60%; font-size: 26px; color: #00fd55; letter-spacing: 2px; position: absolute; top: 50%; left: 20%; } .terminal::before { content: ">"; margin-right: 10px; } ``` ##### JAVASCRIPT 在页面DOM元素加载完毕之后可以通过下面的方法来初始化该控制台打字特效插件。 ```html $('.terminal').typewriting( "Hello World!", { // default: 150 "typing_interval": 200, // default: 0.7s "blink_interval": "1s", // default: black "cursor_color": "#00fd55" } ``` #### 配置参数 ------------ ##### typewriting() 该打字特效的第一个参数是你想要输出的文字。 第二个参数有下面的一些选项: - typing_interval:打字的速度。 - blink_interval:光标闪烁的速度。 - cursor_color:光标的颜色。 第三个参数是打字效果完成之后的回调函数: ```html $('.string').typewriting( "Text here", { "typing_interval": 300, "blink_interval": "1.5s" "cursor_color": "white" }, function() { console.log( "End." ); }); ``` ##### rewrite() 这个方法可以在同一个元素重写不同的文字。 ```html $('.string').rewrite( "Another text here", function() { console.log( "End, 2." ); }); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告