思凡资源网

百度世界（BaiduWorld）

http://baiduworld.baidu.com/

为什么拿百度说事，因为百度世界自2006~2014年的每个年度的官网都保存的很好，让我们得以回顾更早时候百度世界的官网是啥样。通过回顾以前的网站模样，就可以侧面看出web前端技术这几年的发展历程了。

2006

http://baiduworld.baidu.com/2006/index.html

2007

http://baiduworld.baidu.com/2007/index.html

2008

http://baiduworld.baidu.com/2008/index.html

2009

http://baiduworld.baidu.com/2009/index.html

20010

http://baiduworld.baidu.com/2010/index.html

2011

http://baiduworld.baidu.com/2011/index.html

2012

http://baiduworld.baidu.com/2012/index.html

2013

http://baiduworld.baidu.com/2013/index.html

2014

http://baiduworld.baidu.com/

一一列举了每个年度的官网地址，可以看出2014年也就是最近一年的官网基于html5文档申明规范，并在头部最显眼的地方做了一个js画线的动画效果（flash已经逐渐淡出视野，动画大部分用js来实现，因为可以兼容移动设备）。出于职业的原因，首先就想到的是html5的canvas或者svg画图，但是看源代码不是，不过也是js实现的，大概原理是这样的：

定义一个外围层

html

css

.divWrapper{

width:100px; height:100px; overflow:hidden;

}

在添加一个线条层之后是这样

html