在受到SVG+CSS3动画仿作草莓音乐节宣传视频的伤害后，一直想找个简单唬人的东西做一做来平复一下悲愤的心情。翻了下收藏夹，找到了一个珍藏了很久的存货，三十种濒危动物的碎片动画效果。有时候，很多创意来自于别人，别不承认，戳戳看，很惊艳 。以前写过CSS3实现lowpoly动画效…

动态表情包比静态表情图更有趣； 动态图比静态图更生动有吸引力； App 里的动态效果也要比静态设计更能体现逼格。

当时开发参考过的小部分网站，其它参考过的大量网站由于电脑硬盘出现故障丢失了无法恢复。 以上网站这些不是很重要，真正重要有用的网站链接我已经标注出来。

首先我们来说一下前端 icon 的发展史。 在我刚开始实习时，大部分图标都是用 img 来实现的。渐渐发现一个页面的请求资源中图片 img 占了大部分，所以为了优化有了image sprite 就是所谓的雪碧图，就是将多个图片合成一个图片，然后利用 css 的 backgrou…

放轻松，今天不是面试课。有人说欧巴的上一篇文章太难了，入门的话看不懂。 不要慌哈，网络安全的内容比较多，一篇文章写不完，后续会分成几篇文章，带大家手动实现一波，加深理解。 言归正传，今天欧巴要和大家分享一波硬核网站，作为一名前端工程师，不能总依靠UI小姐姐，工作上要为UI小姐姐…

在浏览网页寻找一个整洁的Javascript动画库时，我发现很多“recommended”的动画库一段时间都没有维护。 经过一些研究，我收集了11个最好的库，在你的应用程序中使用。我还添加了一些，主要是非维护的，有用的库。 使用UI组件时，您还可以使用Bit轻松地在不同应用程序…

OneClock目前的三个表盘中用户最喜欢的是翻页时钟。翻页效果是表盘的核心，也是我花时间调试最久的细节。经过7次的产品迭代，终于调整到了一个合适的效果。 实现这个动效的方法只需用到 CABasicAnimation中的以X轴旋转即可。CABasicAnimation实际上还有…

我是一个爱折腾设计的前端，一直都在标榜自己的页面还原是多么的牛 X 。怎么做到页面还原？我有一个最笨但是有效的方法，就是把设计稿直接存成图片，作为背景图然后临摹着设计稿进行开发。我觉得自己太有才了。像素级还原有没有？ 但是 Too Young Too Simple 。这种方式虽…