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. Swift Pointer 使用指南

    Overview C Syntax Swift Syntax Note const Type * UnsafePointer<Type> 指针可变,指针指向的内存值不可变. Type * ...

  2. Postgresql_最新版11.2源码编译安装

    pg官网:https://www.postgresql.org/ yum -y gcc gcc-c++ cmake ncurses-devel perl zlib* .去官网下载源码包. 下载地址:h ...

  3. 在Unity中json文件的解析方式

    using System.Collections; using System.Collections.Generic; using UnityEngine; using LitJson; using ...

  4. 【转载】intellij idea如何将web项目打成war包

    1.点击[File]->[Project Structure]菜单(或使用Shift+Ctrl+Alt+S快捷键),打开[Project Structure]窗口.如下图: 2.在[Projec ...

  5. HTTP数据包详解

     无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相当重要, 因为它让我们理解了Web应用程序的内部工作. 本文将对HTTP协议进行详细的实例讲解,内容较多,希望大家耐心看. 阅读目录 ...

  6. [luogu2825 HEOI2016/TJOI2016] 游戏 (二分图最大匹配)

    传送门 Description 在2016年,佳缘姐姐喜欢上了一款游戏,叫做泡泡堂.简单的说,这个游戏就是在一张地图上放上若干个炸弹,看是否能炸到对手,或者躲开对手的炸弹.在玩游戏的过程中,小H想到了 ...

  7. CentOS7下安装docker(Docker系列1)

    CentOS7下安装docker 系统要求 为了安装docker,需要准备 64-bit的CentOS 7 删除非官方的Docker包 yum的仓库中有一个很旧的Docker包, 现在Docker官方 ...

  8. PHP统计当前在线用户数实例

    HTML 我们在页面上放置一个显示当前在线人数的div#total以及一个用于展示访客地区分布的列表#onlinelist,默认我们在列表中放置一张与加载动画图片,后面我们用jQuery控制当鼠标滑向 ...

  9. JAVA数据库连接的另一种实现及简单的数据插入及显示

    教材是JDK8的,家里也可以正规的测试JDK8, 但公司电脑是JDK6的,所以代码要相应的变动一下下,以适应老的TRY语句. Message.java package cc.openhome; imp ...

  10. Android获取设备屏幕宽高像素值的两个方法

    private void get1() { Resources resources = this.getResources(); DisplayMetrics dm = resources.getDi ...