HTML5 小动画例子

html5.png

HTML 5 的小动画效果

gif 录制可能有一些失帧，不过还是放出来看一下吧。

html.gif

这个效果做起来挺简单的。这里用到了几个小动画 。
1.宝剑从上面垂直插下来。（思路：先设定宝剑元素在屏幕上方，即修改y的值，也可以通过修改margin-top来实现）
2.“”寻“”字掉下来并且旋转。（思路：修改旋转角度和y或margin-top）
3.标题变大再缩小（思路：CSS3 中的 transform:scale）
4.打字效果（思路：通过setTimeout 不断调用修改 字符串 下标，并且输出 。网上有个有个不错的jQuery插件Typed.js，效果也很赞）；
5.素材由千库网提供。