时光荏苒，白驹过隙！又是一年将要结束，崭新的 2018 即将到来。每到年底，各大资讯网站的专题盘点让我们应接不暇，这当然少不了 CodePen 。作为知名的前端交流社区，CodePen 上的技术高手们总能不间断的为我们带来各种的惊喜。
在去年《The Most Hearted of 2016》的专题盘点中，涌现了像 Flexbox 游乐场、Shader 图像变换特效、纯 CSS 实现的雪橇犬等众多优秀的前端作品，我们也直观的体会到前端开发者们丰富的想象力与创造力。（注：2016 年优秀作品可以在《2016 年 10 个最佳的 CodePen 作品》文章中详细了解。）那么，今年 CodePen 上又沉淀了哪些创意、有趣的作品呢？随小狮一起先睹为快吧！
1.The Last Experience
The last experience 是 Gerard Ferrandez 利用 CSS+JS 制作的酷炫、有趣的机器人舞蹈动画。你可以利用鼠标对机器人进行拖拽，或是将其抛出。
项目地址：【传送门】
2.I Could Not Stop
I Could Not Stop 是一个有趣的作品。通过点击图片，你可以将图片无限的分割。每点击一次，它都可以生成 4 张更小的图片。当然，如果你没有密集恐惧症的话，你可以一直玩下去。
项目地址：【传送门】
3.Trees
这个作品叫做《树》，通过点击窗口中的画布，就可以随机生成丰富多彩的树状图形。但有了新树生成，老树也会不断地消失。
项目地址：【传送门】
4.Star Wars characters
在这个作品中，你可以通过调整窗口的大小更换星球大战中的人物角色。作品应用了 CSS 媒体查询特性进行实现。
项目地址：【传送门】
5.Winter Tidings
这是一个非常有意境的纯 CSS 作品。流畅的动画，悦耳的音乐，漂亮的图像带你探寻冬日里神秘的森林。
项目地址：【传送门】
6.Canvas Orbital Trails
一个奇妙、有趣的轨迹运动作品。你可以在屏幕上点击、拖动生成出不同的轨迹线路。
项目地址：【传送门】
7.Showcase Car
这款作品是由纯 CSS 实现的 3D 汽车模型演示。通过选择复选框的内容，你还可以看到汽车的细节与效果展示，例如打开车灯、车门、车窗等，为汽车增添阴影效果，或使其移动一圈。
项目地址：【传送门】
8.Rainbow Star Wave
彩虹星浪是一款酷炫、有趣的作品，作者 Misha Tsankashvili 利用 HTML 与 CSS 关键帧动画制作而成。你也可以在 CodePen 的编辑器中获取代码，通过调整来实现其他的形状与动画。
项目地址：【传送门】
9.The Color Averager
颜色平衡器是一个非常实用的 Demo. 通过选择两种不同的颜色，你可以看到颜色搭配后的效果。
项目地址：【传送门】
10.Chill the Lion
Chill the Lion 是一个基于 ThreeJS 制作的 WebGL 示例。它由一个像素小狮子和风扇组成，你可以移动、点击鼠标来移动风扇，并控制风量逗小狮子开心。
另外，此作者还创作了 Sneeze The Dragon 和 Cat vs Ball of Wool 等优秀的作品，有兴趣的朋友也可以看看。
项目地址：【传送门】
11.Squarebreath
这个 Demo 的作者也相当的厉害。他利用了 CSS 关键帧动画、过渡与延时属性，打造出了一个波浪式的彩色网格对齐效果。
项目地址：【传送门】
12.TinyPolyWorld
TinyPolyWorld 是基于 Three.js 制作的 3D 飞行演示。你可以在 3D 环境中利用鼠标移动飞机，体验飞机移动时的流畅动作，观察飞机的动态阴影以及色彩搭配。
项目地址：【传送门】
13.Super Speed Snowmountain Survival
又是一款利用 CSS 与 JS 实现的滑雪小游戏。只要不被树击中，你就能不断的获得分数。
项目地址：【传送门】
14.4D Perspective
这款作品将通过酷炫的动画与过渡效果，带你体验 4D 视角。
项目地址：【传送门】
15.Snake game
作为经典的益智类游戏《贪吃蛇》想必大家不会陌生，这款作品就利用 CSS 与 JS 进行了简单的重制，感兴趣的朋友可以来感受一下。
项目地址：【传送门】
感谢你的阅读。若你有所收获，欢迎点赞与分享。
注：
如需转载，烦请按下方注明出处信息，谢谢！
部分内容源自：The Best of CodePen for 2017
作者：IT程序狮
原文地址：https://zhuanlan.zhihu.com/p/32511607
