1.效果

2.源码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <style type="text/css">

        #myDiv{

            display: inline-block;

            width:500px;

            height:300px;

            background-color:rgba(0,0,0,0.3);

            color:hsla(0,100%,70%,1);

            word-wrap:break-word;

            line-height:30px;

            letter-spacing:3px;

            padding-left:3px;

            text-indent:40px;

            border-radius:5px;

            -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);

            -moz-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);

            box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var myDiv = document.getElementById("myDiv");

            var contentArr = "秋天来临了天空像一块覆盖大地的蓝宝石。村外那个小池塘睁着碧澄澄的眼睛，凝望着这美好的天色。一对小白鹅侧着脑袋欣赏自己映在水里的影子。山谷里枫树的叶子，不知是否喝了过量的酒，红的像一团火似的。村前村后的稻子，低着头弯着腰，在秋风中默默地等待着人们去收割，半空中，排着“人”字形的雁群，高兴的唱着歌，告别人们，向天边慢慢飞去……".split("");

            var content = "";

            var index = 0;

            var ID = setInterval(function () {

                content += contentArr[index];

                myDiv.innerHTML = content + "_";

                index++;

                if(index === contentArr.length){

                    myDiv.innerHTML = content ;

                    clearInterval(ID);

                    console.log("结束了");

                }

            },100);

        }

    </script>

</head>

<body>

<div id="myDiv"></div>

</body>

</html>

js+css模仿打字效果的更多相关文章

  1. 纯css实现打字效果

    概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...

  2. CSS 实现打字效果

    JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...

  3. CSS实现打字效果

    .print{ width:250px; white-space:nowrap; overflow:hidden; -webkit-animation: dy 3s steps(60, end) in ...

  4. html + css 实现无需 js 的打字效果

    以前要达到类似在电脑上打字的效果,需要 js+html.今天我将介绍一种新方法.本文主要介绍纯 html+css 实现打字效果,有一定的参考价值,大家可以学习一下.提供所有代码,可以直接使用. 一.原 ...

  5. js实现打字效果

    <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing& ...

  6. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  7. JavaScript实现动态打字效果

    废话不多说,上代码~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  9. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

随机推荐

  1. PHP并发IO编程实践

    PHP相关扩展 Stream:PHP内核提供的socket封装 Sockets:对底层Socket API的封装 Libevent:对libevent库的封装 Event:基于Libevent更高级的 ...

  2. luoguP4719 【模板】动态 DP 线段树+树链剖分+矩阵乘法+动态DP

    题目描述 给定一棵n个点的树,点带点权. 有m次操作,每次操作给定x,y,表示修改点x的权值为y. 你需要在每次操作之后求出这棵树的最大权独立集的权值大小. 输入输出格式 输入格式: 第一行,n,m分 ...

  3. sqlserver系统表使用

    SELECT s.table_catalog as 数据库名, o.name as 表名, c.name as 列名FROM INFORMATION_SCHEMA.TABLES s,--库 sys.o ...

  4. ActionChains定位元素

    ActionChains UI自动化测试过程中,经常遇到那种,需要鼠标悬浮后,要操作的才会元素出现的这种场景,那么我们就要模拟鼠标悬浮到某一个位置,做一系列的连贯操作,Selenium给我们提供了Ac ...

  5. PY简易爬虫

    然而,实用性很差,仅仅是能用而已. 已知bug: 由于土啬的问题,经常会炸掉.网络不稳定导致各种Connection Aborted/SSLError: EOF occurred in violati ...

  6. [kuangbin带你飞]专题1-23题目清单总结

    [kuangbin带你飞]专题1-23 专题一 简单搜索 POJ 1321 棋盘问题POJ 2251 Dungeon MasterPOJ 3278 Catch That CowPOJ 3279 Fli ...

  7. [Ynoi2015]我回来了

    题目大意: 给定一张无向无权图,每次给定若干个二元组\((x_i,y_i)\),定义点\(u\)满足条件,当且仅当存在\(i\),并满足\(dist(u,x_i)\leqslant y_i\)(\(d ...

  8. 1069. The Black Hole of Numbers

    For any 4-digit integer except the ones with all the digits being the same, if we sort the digits in ...

  9. （24）Spring Boot环境变量读取和属性对象的绑定【从零开始学Spring Boot】

    凡是被Spring管理的类,实现接口 EnvironmentAware 重写方法 setEnvironment 可以在工程启动时,获取到系统环境变量和application配置文件中的变量. com. ...

  10. POJ 3076

    DLX算法,刚接触,是关于精确覆盖的,白书上有算法介绍. 代码模板 #include <iostream> #include <cstdio> #include <cst ...