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;
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
#picture {
position: absolute;
width: 200px;
height: 200px;
top: 100px;
left: 100px;
}
#show {
position: absolute;
width: 0;
height: 1.5em;
top: 400px;
left: 100px;
overflow: hidden;
white-space： pre； //保留空白字符；在英文的打印中会用到；如果没有这个属性，会出现先闪烁完，才出现英文单词的情况；
}
#picture:hover~#show {
animation: cursor 1s step-end infinite,typing 8s steps(20) forwards; //forwards停在动画的结束状态；
border-right: 2px solid black;
}
@keyframes cursor {
50% {
border-color: transparent; //来实现右边框的闪烁；
}
}
@keyframes typing {
form {
width: 0;
}
to {
width: 20em;
}
}
</style>
</head>
<body>
https://hbimg.huabanimg.com/3dab484f2f5f33be47d45fcc549a6837e0decf7018283e-VJXMha_fw658"id="picture">
你是我的小呀小苹果~,怎么爱你都不嫌多~</div>
</body>
</html>
