auto printer 自动打字机效果
前段时间在知乎上看到了一个打字机的效果,所以,心血来潮,自己也来写了一个打字机的效果。
比较简单,但还有待优化的地方,因为自己感觉这个效果不够炫,等哪天想出好的点子了。再来更新……
代码效果预览地址: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 += "      ";
}
if (str[index]=="n") {
content.innerHTML += "</br></br>";
content.innerHTML += "      ";
}
else if (index==str.length) {
clearInterval(timer);
}
else
content.innerHTML += str[index];
index++;
}
timer=setInterval(print,100);
}
auto printer 自动打字机效果的更多相关文章
- Vue个人博客关于标题自动打字机效果Typewriter
最近在写个人Blog 中间看过很多个人博客的开发 一大部分用的是Hexo框架或者vuePress框架 导入各种主题样式插件等等 但是看多了就会发现 很多博主的个人博客基本都很相似 并没有什么新东西呈现 ...
- css3实现色子自动翻转效果
原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...
- 关于Unity中NGUI的Tab商城、Scrollview和打字机效果的实现
Tab商城实例 UIToggle 和 UIToggledObjects+ Box Collider(实现商城功能必备) 1.创建两个个UI Sprite,Sprite1和Sprite2 2.给Spri ...
- Auto ML自动特征工程
Auto ML自动特征工程 特征工程是在做机器学习训练的过程中必不可少的环节,特征工程就是找出对模型结果有益的特征交叉关系,通常特征工程需要耗费算法工程师大量的精力去尝试.针对这样的场景,PAI推出智 ...
- Auto ML自动调参
Auto ML自动调参 本文介绍Auto ML自动调参的算法介绍及操作流程. 操作步骤 登录PAI控制台. 单击左侧导航栏的实验并选择某个实验. 本文以雾霾天气预测实验为例. 在实验画布区,单击左上角 ...
- css3线条围绕跑马+jquery打字机效果
原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...
- js打字机效果实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>打 ...
- 原生js实现简单打字机效果
快过年了,公司基本没活,闲着也是闲着,就写了一个 打字机效果玩玩,感觉挺有意思的. 具体代码 请参见我的github,请戳这里 预览效果,请戳这里
- Atitit.auto complete 自动完成控件的实现总结
Atitit.auto complete 自动完成控件的实现总结 1. 框架选型 1 2. 自动完成控件的ioc设置 1 3. Liger 自动完成控件问题 1 4. 官网上的code有问题,不能 ...
随机推荐
- Hibernate逍遥游记-第10章 映射继承关系-003继承关系树中的每个类对应一个表(joined-subclass)
1. 2. <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate ...
- mybatis和hibernate区别和应用场景
hibernate:是一个标准ORM框架(对象关系映射).入门门槛较高的,不需要程序写sql,sql语句自动生成了. 对sql语句进行优化.修改比较困难的. 应用场景: 适用与需求变化不多的中小型项目 ...
- linux常用头文件
http://blog.csdn.net/kokodudu/article/details/17361161 aio.h 异步I/Oassert.h 验证程序断言 complex 复数类complex ...
- Android移动应用开发中常见的经验技巧总结
转:http://wwwdevstorecn/essay/essayInfo/6128.html 1. 对话保持的解决方案. 要求: 1.app中使用webview访问具体网站的内容,但是app与服务 ...
- hdu 4961 Boring Sum (思维 哈希 扫描)
题目链接 题意:给你一个数组,让你生成两个新的数组,A要求每个数如果能在它的前面找个最近的一个是它倍数的数,那就变成那个数,否则是自己,C是往后找,输出交叉相乘的和 分析: 这个题这种做法是O(n*s ...
- hdu 4970 Killing Monsters (思维 暴力)
题目链接 题意: 有n座塔,每座塔的攻击范围为[l,r],攻击力为d,有k个怪兽从这些塔前面经过,第i只怪兽初始的生命力为hp,出现的位置为x,终点为第n个格子.问最后有多少只怪兽还活着. 分析: 这 ...
- public,protected,friendly,private的访问权限
请说出作用域public,private,protected,以及不写时的区别 这四个作用域的可见范围如下表所示. 说明:如果在修饰的元素上面没有写任何访问修饰符,则表示friendly. 作用域 ...
- bzoj2797
对和排序,显然最小是a1+a2,次小a1+a3 然后穷举哪里是a2+a3 这样a1,a2,a3就求出来了 注意a2+a3只可能是前n+1项中的一个,所以穷举这步是O(n)的 接下来我们把已经确定的数的 ...
- poj 3352 Road Construction
// 只能说这题和上题一模一样// 我就直接贴上题代码了.. #include <iostream> #include <algorithm> #include <que ...
- Liunx系统学习一,liunx系统的目录结构及含义
LIUNX系统目录结构: “/” ===>这是linux文件系统的入口,也是整个linux文件系统的根目录,linux不同于windows,没有所谓的C,D,E盘,整个liunx只有一个根分区 ...