js实现打字机效果（完整实例）
在上篇css高斯模糊的效果基础上用js实现一个打字机效果：
上图：
代码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>js实现打字机效果（高斯模糊背景）</title>
<style>
.box{
width: 750px;
height: 400px;
background: url('./img/timg.jpg') no-repeat 100% 100%;
background-size: cover;
position: relative;
}
.content{
height: 60%;
width: 60%;
background: white;
position: absolute;
left: 50%;
top: 50%;
margin-left: -30%;
margin-top: -16%;
border-radius: 4px;
}
/* filter是对该元素的模糊，因此对content添加并模糊伪元素，并定位到content的下层，而不是直接修改背景图或content的样式 */
.content::before{
content: '';
position: absolute;
top:0;right:0;bottom:0;left:0;
filter: blur(3px);
margin:-21px;
background: url('./img/timg.jpg') no-repeat 100% 100%;
background-size: cover;
opacity: .8;
}
.content p{
padding: 20px 15px;
color: white;
text-indent: 20px;
font-size: 14px;
line-height: 28px;
letter-spacing: 1px;
/* 清除子元素对父元素filter属性值的继承 */
filter: blur(0);
}
</style>
</head>
<body>
<div class="box">
<div class="content" id="contents">
</div>
</div>
</body>
</html>
<script>
function start(){
let str = ' 什么是永远？有生之年就是永远。分手不是一定坏事，只是证明那个人不是你的地久天长。在时间线上，是有一个人在等你，时间到了，就会相遇。<br/> 我好像没有特别喜欢的事情,但是和喜欢的朋友一起随便聊聊天,打打游戏 ,花时间做点无聊的事情,就很高兴了,因为和舒服的人一起挥霍时间本身就是很轻松快乐的事情。<br/>--红叶都枫了@163'
let str_ = ''
let i = 0
let content = document.getElementById('contents')
let timer = setInterval(()=>{
if(str_.length<str.length){
str_ += str[i++]
content.innerHTML = '<p>'+str_+'_</p>' //打印时加光标
}else{
clearInterval(timer)
content.innerHTML = '<p>'+str_+'</p>'
}
},100)
}
start()
</script>
js实现打字机效果（完整实例）的更多相关文章
- js实现打字机效果
var s = 'Hello World! Hello World! Hello World!'; var con = $('.container'); var index = 0; var leng ...
- js打字机效果实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>打 ...
- 原生js实现简单打字机效果
快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里
- 超详细的php用户注册页面填写信息完整实例（附源码）
这篇文章主要介绍了一个超详细的php用户注册页面填写信息完整实例,内容包括邮箱自动匹配.密码强度验证以及防止表单重复等,小编特别喜欢这篇文章,推荐给大家. 注册页面是大多数网站必备的页面,所以很有必要 ...
- 第22天：js改变样式效果
一.输出语句 1.alert:弹出警示框(用的非常少,用户体验不好)完整写法:window.alert(“执行语句”):window对象,窗口,一般情况可省略alert(123); 2.console ...
- 前后端API交互数据加密——AES与RSA混合加密完整实例
前言 前段时间看到一篇文章讲如何保证API调用时数据的安全性(传送门:https://blog.csdn.net/ityouknow/article/details/80603617),文中讲到利用R ...
- 前后端API交互数据加密——AES与RSA混合加密完整实例(转载）
前言 前段时间看到一篇文章讲如何保证API调用时数据的安全性(传送门:https://blog.csdn.net/ityouknow/article/details/80603617),文中讲到利用R ...
- css3线条围绕跑马+jquery打字机效果
原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 微信小程序发送短信验证码完整实例
微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ...
随机推荐
- API接口开发规范
API接口是不同软件系统之间进行通信的重要方式,良好的API接口设计规范可以提高系统的可维护性.可扩展性和易用性.本文介绍了一套详细的API接口开发规范,包括命名规范.请求和响应规范.安全规范等内容, ...
- linux安装jdk压缩包版
1.下载压缩包可以选择国内大厂的jdk镜像网站下载速度很快, 比如华为的:https://repo.huaweicloud.com/java/jdk/ 2.查看Linux系统是否有自带的jdk: 输入 ...
- linux 安装mysql8.0.11
1.使用系统的root账户 2.切换到/use/local 目录下 3.下载mysql ?wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysq ...
- 论 C++ 中 double 类型的优化问题
是这样的,我在 OI 出题中,std 习惯使用 double,但是求解,在大数据的情况下用 long double,小数据用 double. 虽然这样也没什么问题,但是在 std 中我是不开启 -O2 ...
- Boruvka 简介
Boruvka 是一种最小生成树算法,用于求解稠密图的 MST. [典题]CF Xor-MST: 发现边数是 $n^2$ 级别的,直接把 Kruskal 和 Prim ban 了,所以考虑使用 Bor ...
- 开源机密计算平台：蓬莱-OpenHarmony
演讲嘉宾 | 杜 东 回顾整理 | 廖 涛 排版校对 | 李萍萍 嘉宾简介 杜东,上海交通大学助理研究员.中国计算机学会CCF会员,ACM会员.研究兴趣为操作系统与体系结构.服务器无感知(Se ...
- 熊磊：成功移植 OpenHarmony 到多套开发板，是最开心的事
编者按:在 OpenHarmony 生态发展过程中,涌现了大批优秀的代码贡献者,本专题旨在表彰贡献.分享经验,文中内容来自嘉宾访谈,不代表 OpenHarmony 工作委员会观点. 熊磊 华为技术有限 ...
- 李俊刚：我是如何在OpenHarmony完成ap6275s WiFi驱动的HDF适配工作的？
编者按:在 OpenHarmony 生态发展过程中,涌现了大批优秀的代码贡献者,本专题旨在表彰贡献.分享经验,文中内容来自嘉宾访谈,不代表 OpenHarmony 工作委员会观点. 李俊刚 深圳开鸿数 ...
- 单链表实现增删查改等操作（python版本）
单向链表 : SingleLinkedList 节点类属性: 数据域:value 节点存储的数据 地址域:next 指向下一个节点的地址 链表类属性: 头指针:head 指向链表的第一个节点的地址 尾 ...
- DevEco Studio 3.1 Beta新特性知多少
原文链接:https://mp.weixin.qq.com/s/HYdNlKKA9Z51dfI1bcplDA,点击链接查看更多技术内容: DevEco Studio 3.1 Beta新特性知多少原文 ...