CodePen上值得关注的 7 款 CSS 动画
作为前端开发者，相信大家对 CodePen 不是很陌生。它是一个非常了不起的网站，在上面大家不仅可以分享自己的 Web 作品，而且可以欣赏到世界各地的优秀开发者实现的各种酷炫效果。当然，你也可以从这里获取一些小灵感。
在本文中，小狮将与大家分享一些超炫的 CSS 动画效果。当然，除了欣赏外，有些Demo的作者也给出了具体实现的方法，值得我们去学习与借鉴。那么，一起来Enjoy吧！
1. 纯CSS实现的爱心动画
no sprite, no JS heart animation BY：Ana Tudor
地址：http://t.cn/RtJXwKs
纯 CSS 实现 Twitter 上的爱心动画。原作者与大家分享了实现的整体过程，供大家学习与参考。
2. 纯CSS实现的沙冰机APP
Smoothie Maker App in Pure CSS BY：Jamie Coulter
地址：http://t.cn/RtXMQMK
一个综合使用 CSS 各种属性实现的沙冰机 APP。大家可以去体验一下。
3. 纯CSS实现的登录与验证界面
Login Form CSS only validation BY：James Nowland
地址：http://t.cn/RtXMHaj
用HTML+CSS实现的登录与验证界面。这样的用户体验是不是更加简单、直观呢。实现过程在这里。
4. CSS和JS实现的PokemonGo动画
Pokemon Go - ZingTouch x Anime.js BY：ZingChart
地址：http://t.cn/RtXMT90
利用 Anime.js 实现的 Pokemon Go，是不是很酷呢？
5. CSS与JS实现的太阳系数据可视化动画
CSS 3D Solar System BY：Julian Garnier
地址：http://t.cn/zWsz4E2
用HTML+CSS与少量JS代码完成的太阳系数据可视化动画。帅爆了，有木有！
6. 纯CSS实现的人物动画
Character Animation in Pure CSS BY：Aakash Rodrigues
地址：http://t.cn/RvfJpro
纯CSS实现的任务动画。作者没有使用JS、图片以及SVG，但整体效果还是不错滴。
7. CSS3+SVG实现的咖啡机动画
Coffee Machine - SVG animation with CSS3 BY：Jonathan Silva
地址：http://t.cn/RtXMl9G
一个模仿dribbble上设计师Shir Gal的作品【咖啡机】，用CSS3+SVG重新实现的动画。是不是，一毛一样呢。
如果大家觉得还阔以，欢迎点赞、分享哦。
作者：IT程序狮
文章源自：http://t.cn/RtXMpOh
转载烦请注明出处，谢谢合作。
