在上篇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. abp9 .net8 升级错误记录

    错误一. Cannot find compilation library location for package 'System.Security.Cryptography.Pkcs' 修复方法:  ...

  2. SHELL使用教程

    疑难解答 执行完shell文件后不退出 在shell文件末尾添加如下命令即可. exec /bin/bash 参考资料 为什么sh脚本运行之后自动退出,有没有让终端不自动关闭的方法. - Ubuntu ...

  3. KingbaseES V8R6 集群运维系列 -- trusted_server

    案例说明: 在KingbaseES V8R3及V8R6早期的版本,对于读写分离的集群如果网关地址无法连通,将会导致整个集群关闭,数据库服务无法访问.在后期版本的改进中,降低了对网关的依赖性,当网关地址 ...

  4. java实战字符串3：反转每对括号间的子串,多个括号嵌套时，逐层反转

    题目描述 给出一个字符串 s(仅含有小写英文字母和括号).请你按照从括号内到外的顺序,逐层反转每对匹配括号中的字符串,并返回最终的结果. 注意,您的结果中 不应 包含任何括号. 解答要求时间限制:10 ...

  5. 京东一面挂在了CAS算法的三大问题上，痛定思痛不做同一个知识点的小丑

    写在开头 在介绍synchronized关键字时,我们提到了锁升级时所用到的CAS算法,那么今天我们就来好好学一学这个CAS算法. CAS算法对build哥来说,可谓是刻骨铭心,记得是研二去找实习的时 ...

  6. 前端问题整理 Vite+Vue3+Ts 创建项目及配置 持续更新

    前端问题整理 持续更新 目录 前端问题整理 持续更新 前端 Vue 篇 @项目配置 1.node 版本过高问题 安装nvm 管理node版本 2.镜像证书无效问题 3.npm 版本问题 4.npm i ...

  7. #线性dp#CF1110D Jongmah

    题目 分析 考虑三个 \((i,i+1,i+2)\) 可以用 \((i,i,i)\) 和 \((i+1,i+1,i+1)\) 和 \((i+2,i+2,i+2)\) 代替, 所以这样的三元组本质上最多 ...

  8. 【中秋国庆不断更】OpenHarmony定义可动画属性：@AnimatableExtend装饰器

    [中秋国庆不断更]OpenHarmony定义可动画属性:@AnimatableExtend装饰器 @AnimatableExtend装饰器用于自定义可动画的属性方法,在这个属性方法中修改组件不可动画的 ...

  9. Git 12 IDEA上传本地项目到远程

    这里以上传 Spring 开源项目到 Gitee 为例: 1.点击 Create Git Repository 2.选择项目目录 3.添加到缓存库 4.提交到本地库 5.复制远程库地址 6.推送到远程 ...

  10. 7月27日19：30直播预告：HarmonyOS3及华为全场景新品发布会

    7月27日 19:30 HarmonyOS 3 及华为全场景新品发布会 高能来袭! 在HarmonyOS开发者社区企微直播间 一起见证HarmonyOS的又一次智慧进化 扫码预约直播,与您不见不散!