CSS3动画：YouTube的红色激光进度条

Published by Xianqiao Wang on May 7th, 2015

大体来看用了以下技术：

1. Ajax：首先页面内容的加载使用的是Ajax异步请求，所以页头那个激光元素可以在内容请求与接收过程中得以展示，不然的话整个页面刷新那就无法实现了；
2. HTML5 History API: 其次我注意到页面地址也是跟着变的。前面提到整个页面是没有刷新的（一个不太靠谱的方法可以验证这点是显示网站favicon的地方没有出现类似这样的等待图标），但页面地址却更新了，方便你把连接放送给别人时能够打开该页面。这里用到的就是HTML5的History API，通过它可以操作浏览器地址栏的地址，书签及页面状态信息等。
3. CSS3动画属性 ：另外就是红色激光线条本身的实现上，使用了CSS3的动画或者JS写的动画，但更大的可能是两种结合。