前段时间在知乎上看到了一个打字机的效果,所以,心血来潮,自己也来写了一个打字机的效果。

比较简单,但还有待优化的地方,因为自己感觉这个效果不够炫,等哪天想出好的点子了。再来更新……

代码效果预览地址:http://code.w3ctech.com/detail/2525

html:

1 <div class="container">
2 <div id="title"><h3>我喜欢出发--汪国真</h3></div>
3 <span id="content">
4 </span>
5 <span class="line">_</span>
6 </div>

css:

*{
            padding:0;
            margin:0;
        }
        body{
           
        }
        .container{
            width:80%;
            margin:0 auto;
            height:auto;
            padding-top:80px;
            color:#2d6b28;
            line-height:24px;
            font-size:20px;
            transition:all 100ms ease 100ms;
        }
        .line{
            animation:myfirst 0.5s infinite;
        }
        @keyframes myfirst
        {
            from{opacity:0}
            to{opacity:1}
        }

js:

window.onload = function () {
            var content = document.getElementById("content");
            var index = 0;
            var timer;
            var str = "我喜欢出发。n凡是到达了的地方,都属于昨天。哪怕那山再青,那水再秀,那风再温柔。太深的流连便成了一种羁绊,绊住的不仅有双脚,还有未来。n怎么能不喜欢出发呢?没见过大山的巍峨,真是遗憾;见了大山的巍峨没见过大海的浩瀚仍然遗憾;见了大海的浩瀚没见过大漠的广袤,依旧遗憾;见了大漠的广袤没见过森林的神秘,还是遗憾。世界上有不绝的风景,我有不老的心情。n我自然知道,大山有坎坷,大海有浪涛,大漠有风沙,森林有猛兽。即便这样,我依然喜欢。n打破生活的平静便是另一番景致,一种属于年轻的景致。真庆幸,我还没有老。即便真老了又怎么样,不是有句话叫老当益壮吗?n于是,我还想从大山那里学习深刻,我还想从大海那里学习勇敢,我还想从大漠那里学习沉着,我还想从森林那里学习机敏。我想学着品味一种缤纷的人生。n人能走多远?这话不是要问两脚而是要问志向;人能攀多高?这事不是要问双手而是要问意志。于是,我想用青春的热血给自己树起一个高远的目标。不仅是为了争取一种光荣,更是为了追求一种境界。目标实现了,便是光荣;目标实现不了,人生也会因这一路风雨跋涉变得丰富而充实;在我看来,这就是不虚此生。n是的,我喜欢出发,愿你也喜欢。";
            function print() {
                if (index == 0) {
                    content.innerHTML += "</br></br>";
                    content.innerHTML += "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
                }
                if (str[index]=="n") {
                    content.innerHTML += "</br></br>";
                    content.innerHTML += "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp";
                }
                else if (index==str.length) {
                    clearInterval(timer);
                }
                else
                    content.innerHTML += str[index];
                index++;
            }
            timer=setInterval(print,100);
        }

auto printer 自动打字机效果的更多相关文章

  1. Vue个人博客关于标题自动打字机效果Typewriter

    最近在写个人Blog 中间看过很多个人博客的开发 一大部分用的是Hexo框架或者vuePress框架 导入各种主题样式插件等等 但是看多了就会发现 很多博主的个人博客基本都很相似 并没有什么新东西呈现 ...

  2. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

  3. 关于Unity中NGUI的Tab商城、Scrollview和打字机效果的实现

    Tab商城实例 UIToggle 和 UIToggledObjects+ Box Collider(实现商城功能必备) 1.创建两个个UI Sprite,Sprite1和Sprite2 2.给Spri ...

  4. Auto ML自动特征工程

    Auto ML自动特征工程 特征工程是在做机器学习训练的过程中必不可少的环节,特征工程就是找出对模型结果有益的特征交叉关系,通常特征工程需要耗费算法工程师大量的精力去尝试.针对这样的场景,PAI推出智 ...

  5. Auto ML自动调参

    Auto ML自动调参 本文介绍Auto ML自动调参的算法介绍及操作流程. 操作步骤 登录PAI控制台. 单击左侧导航栏的实验并选择某个实验. 本文以雾霾天气预测实验为例. 在实验画布区,单击左上角 ...

  6. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  7. js打字机效果实现

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>打 ...

  8. 原生js实现简单打字机效果

    快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里

  9. Atitit.auto complete 自动完成控件的实现总结

    Atitit.auto complete  自动完成控件的实现总结 1. 框架选型 1 2. 自动完成控件的ioc设置 1 3. Liger  自动完成控件问题 1 4. 官网上的code有问题,不能 ...

随机推荐

  1. oracle触发器详解(转)

    触发器是许多关系数据库系统都提供的一项技术.在ORACLE系统里,触发器类似过程和函数,都有声明,执行和异常处理过程的PL/SQL块. 8.1 触发器类型 触发器在数据库里以独立的对象存储,它与存储过 ...

  2. lintcode : 二叉树的层次遍历II

    题目 二叉树的层次遍历 II 给出一棵二叉树,返回其节点值从底向上的层次序遍历(按从叶节点所在层到根节点所在的层遍历,然后逐层从左往右遍历) 样例 给出一棵二叉树 {3,9,20,#,#,15,7}, ...

  3. linux 防火墙iptables简明教程

    前几天微魔部落再次遭受到个别别有用心的攻击者的攻击,顺便给自己充个电,复习了一下linux下常见的防火墙iptables的一些内容,但是无奈网上的很多教程都较为繁琐,本着简明化学习的目的,微魔为大家剔 ...

  4. java:synchronized

    synchronized:利用上锁实现数据同步,避免多线程操作的情况下,数据出现异常. 另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块. 一个线程获得了一个对象的同步锁,那这个对象上所 ...

  5. 37. Sudoku Solver

    题目: Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated b ...

  6. org.json和json-lib比较

    经常会用到JSON格式才处理,尤其是在Http请求的时候,网上可以找到很多json处理的相关工具,如org.json和json-lib,下面两段源代码是分别使用这两个工具解析和构造JSON的演示程序. ...

  7. Mac + IDEA + JRebel破解方法.

    [重要提示]---最佳人生 一.只推荐当计算机无法访问互联网时使用本破解文件. 二.如果可以访问互联网,建议直接到JRebel官网注册JRebel会员获取[正版永久免费]使用的授权码.JRebel会员 ...

  8. iOSTab bar

    http://www.apkbus.com/android-130504-1-1.html #import #import "FirstViewController.h"#impo ...

  9. Android开发之定义接口暴露数据

    写了一个网络请求的工具类,然后想要获取到网络请求的结果,在网络工具类中写了一个接口,暴露除了请求到的数据 代码: package com.lijingbo.knowweather.utils; imp ...

  10. Android开发之android:process=":remote"

    由于每个应用程序都运行在自己的进程空间,并且可以从应用程序UI运行另一个服务进程,而且经常会在不同的进程间传递对象.在Android平台,一个进程通常不能访问另一个进程的内存空间,所以要想对话,需要将 ...