時光荏苒，白駒過隙！又是一年將要結束，嶄新的 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