如何解剖一个网站?

国外有非常多不错的动态网页作品，非常喜欢，请问如果想要分析他的制作过程需要怎么做

回复内容：

谢邀～

Html5网页动画
其实都是一个一个物体的
某个属性的改变


通过
Chrome的右键→检查元素
可以看到
一个特定物体的CSS 动画属性
是怎么被编辑的

进而了解这个物体
是怎么运动的


下面就举一个解剖网站的例子

有一个Starbucks Frappuccino® 网站
我很喜欢的动画是
在移动端上的Toggle导航

右上角的「三」（叫Toggle）在点下去导航列展开后会旋转变成「X」
代表说再点我一次可以关掉导航
非常有趣
可以点开gif看:
http://manglekuo.com/img/toggle.gif


所以一开始我现在电脑上的Chrome
把Chrome的页面宽度变窄让他出现那个Toggle
然后右键点那个Toggle→ 检查元素


这时候可以看到开发人员工具
出现在页面下方
我在这里为了方便截图
把它拆了出来
放到了右边

如下图：


而当我点击了那个Toggle之后
我发现那个div的class
从原来的"sbOne mobile"
变成了"sbOne mobile expanded"

如下图（注意看两张图被选择的那行的上一行的差别）


这是一个网页动画很常被使用的技巧
发生一个事件（在这里是点击）之后
用Javascript
改变class里的内容
进而触发动画

这时候我们去CSS（在这里是main.css，随便点击截图中最右边任意一个main.css?. ..那一长串就可以去到main.css）里头
用ctrl/command F 找到".expanded" Class

如下图（图长可能需要点击一下才能看到全部）

最下面那一大段一直重复的
就是我们想要的了。

因为 HTML 5 动画
还是实验性的东西
开发者为了要让各大浏览器支持
需要加不同的前缀。

HTML 5 动画有两种

一种是Animation，一种就是这个Transition
（感兴趣自己查）

Animation是可以指定帧的
比如说时间是0%－20%的时候转130º，
20%－100%的时候转50º

而Transition是只能制定属性和时间
在这里是all 1s;
也就是所有属性一秒
代表说假如有任何属性发生了改变
都用一秒的渐变来完成

而上面用了transform: rotate(-45deg);
所以就会用一秒的时间渐渐转－45º的角度



再下面的两段代码他指定了第一根横棒和最后一根横棒的动画...（下图）



根据电脑代码的
后面覆盖前面原则
最终会变成

当按下去Toggle之后
第一根横棒转45º
第二根横棒转-45º
第三根横棒不转透明度变0
三根横棒的所有属性发生改变时有1秒渐变

跟我们观察到的结果一样！
所以这就是 这个动画的精髓所在！

我们成功的解剖到了我们想要的东西。

还有什么问题吗。 。 。
我懒得接着写了。 。 。
你直接问吧。 。 。 国外的很多动态网页，通常都是由js生成页面dom并入场，这类网站信息量少，页面数量也少，但是交互性很强。研究这类网站重点看js。 摘出需要的部分，或者删掉不需要的部分。