js和css3实现字体逐个显示

1、首先 ，用js实现的

代码：（这个出现再次划上去时出现闪现的问题；待解决 ）

本来的理想状况是：当鼠标移动到相应的图片上时，开始逐步打印，移开鼠标后，打印的文本消失；但,emmm,出现了bug,桑心~）

function zhubu(){

var index=0;

var a=document.getElementById("show");

a.style = "display:inline-block;text-decoration:underline;";

var str = document.getElementById("zhubu").innerHTML;

var c = document.getElementById("show");

c.innerHTML ="";

function type() {

if (index-1 == str.length) {

return false;

}

c.innerHTML = str.substring(0,index++);

}

setInterval(type, 150);

}

function xiaochu() {

var a = document.getElementById("show");

a.style = "display:none";

}

2、一计不成，那就  用其他的办法呗~

用css3实现

这里需要注意如果使用：hover的话，需要将两个元素尽可能放在相近的位置，栗如：同一个父元素下，或是父子元素关系； 注意  “~”  “>”  “+” 等符号的使用

css3的animation的八个属性

1、animation-name : 动画名 fn

2、animation-duration: 时间 1s

3、animation-delay : 延时 1s

4、 次数 infinite

5、方向 

6、控制 running paused

7、状态 forwards

8、关键帧变化  steps(）函数

steps函数指定了一个阶跃函数

第一个函数指定了时间函数中的间隔数量

第二个参数可选，接受start和end值，指定在每个间隔的起点或是终点发生阶跃变化，默认为end;

代码：

https://hbimg.huabanimg.com/3dab484f2f5f33be47d45fcc549a6837e0decf7018283e-VJXMha_fw658"id="picture">

你是我的小呀小苹果~,怎么爱你都不嫌多~