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

时间:2021-08-31 00:49:32

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

一、开工

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

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

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

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

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

二、继续查找捧场动态

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

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

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

三、补充

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

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