<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
}
#box{
400px;
height: 400px;
background-color: blue;
top: 100px;
left: 300px;
}
#box > div{
background-color: yellow;
height: 1px;
}
#word{
color: blue;
display: block;
200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
font: 200px/200px '楷体';
}
</style>
</head>
<body>
<div id="box">
<span id="word">恩</span>
</div>
<script type="text/javascript">
var i = 1;
function createH(){
if(i<=200){
var width = i*2+'px';
var left = (200-i)+'px';
}else{
var width = (400-(i-200)*2)+'px';
var left = (i-200)+'px';
}
i++;
var h = document.createElement('div');
h.style.width = width;
h.style.left = left;
h.style.top = (i-2)+'px';
return h;
}
function add(){
if(i===400){
clearInterval(iA);
return false;
}
var h = createH();
document.getElementById('box').appendChild(h);
}
var iA = setInterval(add,10);
</script>
</body>
</html>
这个例子是博客园上面看到的，拿下来。只是让自己有空看下别人好的想法，只要有好的想法javascript就能让页面飞起来