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. beetl模板入门例子

    加入maven依赖 <dependency> <groupId>org.beetl</groupId> <artifactId>beetl-core&l ...

  2. TimerTask定时任务

    web.xml <listener> <listener-class>com.sign.listener.NFDFlightDataTaskListener</liste ...

  3. 视频及MP3 播放浅析 Jplayer参数详细

    初识jplayer插件是因为它的兼容性是最好的,可以兼容到IE6,官网上对它兼容性有很详细的说明 这个是我选择使用它的首要原因. 现在从需求上来了解它的使用方法吧.第一个需求:MP3格式的音频在网页播 ...

  4. SGU495Kids and Prizes 数学期望

    题意: 有n个奖品,m个人排队来选礼物,对于每个人,他打开的盒子,可能有礼物,也有可能已经被之前的人取走了,然后把盒子放回原处.为最后m个人取走礼物的期望. 题解: 本道题与之前的一些期望 DP 题目 ...

  5. 【转载】JavaWeb之DBUtils QueryRunner类对数据表的增、删、查（8种结果集处理方式）、改操作

    一.使用QueryRunner类,实现对数据表的 insert delete update package com.shuhuadream.queryrunner; import java.sql.C ...

  6. 基于 Nginx XSendfile + SpringMVC 进行文件下载

    转自:http://denger.iteye.com/blog/1014066 基于 Nginx XSendfile + SpringMVC 进行文件下载 PS:经过实际测试,通过 nginx 提供文 ...

  7. [APIO2018]铁人两项 [圆方树模板]

    把这个图缩成圆方树,把方点的权值设成-1,圆点的权值设成点双的size,算 经过这个点的路径的数量*这个点的点权 的和即是答案. #include <iostream> #include ...

  8. H5-video1 iOS苹果和微信中音频和视频实现自动播放的方法

    <audio preload="preload" controls id="car_audio" src="http://media.xitao ...

  9. EditorLineEnds.ttr的困扰

    DELL的n年的商用机电脑硬盘坏了,措手不及. 256ssd+1tb企业级.机器快乐很多.一小步,让机器快了一大步. 但是2007出问题了,每次启动EditorLineEnds.ttr被占用.原来有那 ...

  10. SpringBoot中logback.xml使用application.yml中属性

    教你如何使用 springProfile 与 springProperty 让你的logback.xml 配置显得更有逼格,当别人还在苦苦挣扎弄logback-{profile}.xml的时候 你一个 ...