CodePen上值得关注的 7 款 CSS 动画

作者：IT程序狮
文章源自：http://www.jianshu.com/p/d3082080dbcf

作为前端开发者，相信大家对 CodePen 不是很陌生。它是一个非常了不起的网站，在上面大家不仅可以分享自己的 Web 作品，而且可以欣赏到世界各地的优秀开发者实现的各种酷炫效果。当然，你也可以从这里获取一些小灵感。

在本文中，小狮将与大家分享一些超炫的 CSS 动画效果。当然，除了欣赏外，有些Demo的作者也给出了具体实现的方法，值得我们去学习与借鉴。那么，一起来Enjoy吧！

---

1. 纯CSS实现的爱心动画
   --

no sprite, no JS heart animation BY：Ana Tudor

纯 CSS 实现 Twitter 上的爱心动画。原作者与大家分享了实现的整体过程，供大家学习与参考。

2. 纯CSS实现的沙冰机APP
   --

Smoothie Maker App in Pure CSS BY：Jamie Coulter

一个综合使用 CSS 各种属性实现的沙冰机 APP。大家可以去体验一下。

3. 纯CSS实现的登录与验证界面
   --

Login Form CSS only validation BY：James Nowland

用HTML+CSS实现的登录与验证界面。这样的用户体验是不是更加简单、直观呢。实现过程在这里。

4. CSS和JS实现的PokemonGo动画
   --

Pokemon Go - ZingTouch x Anime.js BY：ZingChart

利用 Anime.js 实现的 Pokemon Go，是不是很酷呢？

5. CSS与JS实现的太阳系数据可视化动画
   --

CSS 3D Solar System BY：Julian Garnier

用HTML+CSS与少量JS代码完成的太阳系数据可视化动画。帅爆了，有木有！

6. 纯CSS实现的人物动画
   --
   Character Animation in Pure CSS BY：Aakash Rodrigues

纯CSS实现的任务动画。作者没有使用JS、图片以及SVG，但整体效果还是不错滴。

7. CSS3+SVG实现的咖啡机动画
   --

Coffee Machine - SVG animation with CSS3 BY：Jonathan Silva

一个模仿dribbble上设计师Shir Gal的作品【咖啡机】，用CSS3+SVG重新实现的动画。是不是，一毛一样呢。

---

如果大家觉得还阔以，欢迎点赞、分享哦。另外，转载烦请注明出处，谢谢合作。