一步一步写web之初识web（五-简单源码分析篇）

本来想研究动画效果的，在网上看到了可以用css3的动画属性（@keyframes 规则），由于回来较晚，洗漱后近12点才开始看代码（前两天快3点才睡白天也没休息）又困又累找到方法后就没有继续研究了。刚刚研究了下百度贴吧之永夜君王吧，分析了下代码，现在也随便写点吧。

一、开工

首先想查看捧场动态的源码，可是打开后发现灰色的一大块区域是用<frame>标签实现的，看代码发现src有一个链接，点击network进行查看，返现是服务器返回的一个json数据。在页面查找发现是下面区域今日话题的内容。而捧场动态和最新章节、本月排行、读者贡献榜共同用动画（@keyframes
规则）实现。

 

 
 






二、继续查找捧场动态
接着往下查看代码，发现<frame>标签里包含了#document，打开后会发现这里面的内容就是动画的几个模块，在body中可找到我们需要的东西。



至此布局已经明朗了，至于style中的margin-top的改变应该是在js里修改的，head中包含了引用的js文件。

三、补充

突然想到这是小白学习，可能有的人不知道怎么调试（web小白应该会有这个经历）。我用的是谷歌浏览器，mac下按alt+command+J快捷键可打开开发者工具选项，windows下是ctrl+shitf+J。具体的使用就不再介绍了，打开后百度或自己慢慢摸索吧。

这一章就当一个简单的源码分析篇吧，最为捧场动态效果实现的一个子章节，接下来在写具体的实现，争取今天能写出来吧，原计划今天写好后明天开始react的研究，下午还要陪同学去爬山，只怕计划又要打乱了，动画效果实现后争取来一个总结，其实我还想在这个系列里使用打包编译工具的，但是还没开始看，也不会用，今天应该是完不成了，争取吧，动画实现了学一下less，webpack等，如果时间来得及就在初识系列里跟进，来不及就在react系列里添加。因为以前做过react
native，争取哪天也写一个实践的系类教程吧，加油！