在上篇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/>&nbsp;&nbsp;&nbsp;&nbsp;我好像没有特别喜欢的事情,但是和喜欢的朋友一起随便聊聊天,打打游戏 ,花时间做点无聊的事情,就很高兴了,因为和舒服的人一起挥霍时间本身就是很轻松快乐的事情。<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实现打字机效果（完整实例）的更多相关文章

  1. js实现打字机效果

    var s = 'Hello World! Hello World! Hello World!'; var con = $('.container'); var index = 0; var leng ...

  2. js打字机效果实现

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>打 ...

  3. 原生js实现简单打字机效果

    快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里

  4. 超详细的php用户注册页面填写信息完整实例（附源码）

    这篇文章主要介绍了一个超详细的php用户注册页面填写信息完整实例,内容包括邮箱自动匹配.密码强度验证以及防止表单重复等,小编特别喜欢这篇文章,推荐给大家. 注册页面是大多数网站必备的页面,所以很有必要 ...

  5. 第22天：js改变样式效果

    一.输出语句 1.alert:弹出警示框(用的非常少,用户体验不好)完整写法:window.alert(“执行语句”):window对象,窗口,一般情况可省略alert(123); 2.console ...

  6. 前后端API交互数据加密——AES与RSA混合加密完整实例

    前言 前段时间看到一篇文章讲如何保证API调用时数据的安全性(传送门:https://blog.csdn.net/ityouknow/article/details/80603617),文中讲到利用R ...

  7. 前后端API交互数据加密——AES与RSA混合加密完整实例(转载）

    前言 前段时间看到一篇文章讲如何保证API调用时数据的安全性(传送门:https://blog.csdn.net/ityouknow/article/details/80603617),文中讲到利用R ...

  8. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  9. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  10. 微信小程序发送短信验证码完整实例

    微信小程序注册完整实例,发送短信验证码,带60秒倒计时功能,无需服务器端.效果图: 代码: index.wxml <!--index.wxml--> <view class=&quo ...

随机推荐

  1. 移动端弹性布局方案lib-flexible实践

    2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...

  2. C# 按指定宽高缩放图片

    /// <summary> /// 按指定宽高缩放图片 /// </summary> /// <param name="image">原图片&l ...

  3. KingbaseES 数据库使用Limit子句查询结果返回顺序不一致

    一.KingbaseES数据库limit查询子句: 在KingbaseES数据库使用LIMIT子句限制查询结果的行数,从而实现分段显示数据的功能. 使用LIMIT子句在KingbaseES数据库中进行 ...

  4. 【已解决】MySQL5.x和MySQL8.x 密码验证的区别（修改MySQL数据库密码的验证方式）

    mysql5.x使用的是 mysql_native_password mysql8.x使用的是 caching_sha2_password 1. 进入mysql mysql -u root -p 2. ...

  5. 通过位运算修改指定bit位的值

    通过位运算将指定位的值置0或1 问题样例 假如现在有一个8bit二进制数A,其可以为任何值,所以这里不妨先设A=(xxxxxxxx)2,{x|0,1} 现在需要你将A的几个指定位修改为1或0,例如将A ...

  6. #线段树分治，线性基，并查集#CF938G Shortest Path Queries

    题目 给出一个连通带权无向图,边有边权,要求支持 \(q\) 个操作: \(x\) \(y\) \(d\) 在原图中加入一条 \(x\) 到 \(y\) 权值为 \(b\) 的边 \(x\) \(y\ ...

  7. #特征方程，dp，快速幂#洛谷 4451 [国家集训队]整数的lqp拆分

    题目 分析 设\(dp[n]\)表示答案,因为\(dp[n]=\sum\prod_{i=1}^mF_{a_i}\) \(dp[n]=\sum_{i=1}^{n-1}dp[i]*F_{n-i-1}\) ...

  8. docker笔记之安装

    本文于2017年上半年完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 最近由于工作关系,接触到了docker技术.为了对docker有更多 ...

  9. Godot.NET C#IOC重构(2):TileMap 详解

    目录 前言 TileMap添加 TileMap绘制 TileMap 连续图块 修改纹理原点 统一设置 自动地形 匹配规则 修改匹配概率 修改概率前 修改概率后 随机图块 Scattering 不连续间 ...

  10. Centos 8.0 minimal命令行安装图形化界面（超详细）

    Centos 8.0 安装图形化界面(超详细) 开始之前呢,请先查看您的Centos版本和是否有root账户权限. 一.安装Centos 图形化界面并重启 下载安装图形化界面 执行命令 yum gro ...