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. BRAFT EDITOR富文本编辑器

    https://braft.margox.cn/demos/basic     官方文档 import React from 'react' import Uploading from '../Upl ...

  2. Redis好在哪？

    Redis免费入门教程:阿里云大学—开发者课堂 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. Redis ...

  3. Python基础知识-Day4

    一.函数关键字关键字是Python内置的,具有特殊意义的标识符,自定义标识符命名时不可与之重复.可以通过以下代码查看Python内置的关键字内容. import keyword print(keywo ...

  4. es6-set-map数据结构

    Set的用法 set的key一定是字符串 { let list=new Set(); list.add(5);//向set中增加值要用add() list.add(6); console.log('s ...

  5. eas之添加表格列宽自动调整设置

    设置表格整体宽度自动调整为所在panel的宽度 KDTable table=new KDTable(); table. setAutoResize (boolean); 注意:该功能在冻结功能启用后, ...

  6. 爬虫系列(八) 用requests实现天气查询

    这篇文章我们将使用 requests 调用天气查询接口,实现一个天气查询的小模块,下面先贴上最终的效果图 1.接口分析 虽然现在网络上有很多免费的天气查询接口,但是有很多网站都是需要注册登陆的,过程比 ...

  7. react-native页面间传递数据的几种方式

    1. 利用react-native 事件DeviceEventEmitter 监听广播 应用场景: - 表单提交页面, A页面跳转到B页面选人, 然后返回A页面, 需要将B页面选择的数据传回A页面. ...

  8. tp5 前置方法

    Route::any('adminapi/v1/login','adminapi/v1.login/login');Route::any('adminapi/v1/first','adminapi/v ...

  9. Cloudera 5.8.3 SolrCloud+HDFS的索引数据备份和恢复。(需重启solr进程。)

    一.备份基于HDFS的solrCloud集合数据 1.确认要备份的solr文件夹. /solr/history_customer_collection_test 2.开启HDFS快照功能. hdfs ...

  10. 0120Keeplived实现自动切换Mysql服务

    转自http://biancheng.dnbcw.info/mysql/381020.html Keepalived+mysql 自动切换网络结构:VIP 192.168.88.200mysq11 1 ...