这个效果做起来挺简单的。这里用到了几个小动画 。 1.宝剑从上面垂直插下来。(思路:先设定宝剑元素在屏幕上方,即修改y的值,也可以通过修改margin-top来实现) 2.“”寻“”字掉下来并且旋转。(思路:修改旋转角度和y或margin-top) 3.标题变大再缩小(思路:CSS3 中的 transform:scale) 4.打字效果(思路:通过setTimeout 不断调用修改 字符串 下标,并且输出 。网上有个有个不错的jQuery插件,效果也很赞); 5.素材由千库网提供。
本文共 338 字,大约阅读时间需要 1 分钟。
这个效果做起来挺简单的。这里用到了几个小动画 。 1.宝剑从上面垂直插下来。(思路:先设定宝剑元素在屏幕上方,即修改y的值,也可以通过修改margin-top来实现) 2.“”寻“”字掉下来并且旋转。(思路:修改旋转角度和y或margin-top) 3.标题变大再缩小(思路:CSS3 中的 transform:scale) 4.打字效果(思路:通过setTimeout 不断调用修改 字符串 下标,并且输出 。网上有个有个不错的jQuery插件,效果也很赞); 5.素材由千库网提供。
转载于:https://juejin.im/post/5a321324f265da4309452d2a