時光荏苒，白駒過隙！又是一年將要結(jié)束，嶄新的 2018 即將到來。每到年底，各大資訊網(wǎng)站的專題盤點讓我們應(yīng)接不暇，這當然少不了 CodePen 。作為知名的前端交流社區(qū)，CodePen 上的技術(shù)高手們總能不間斷的為我們帶來各種的驚喜。
在去年《The Most Hearted of 2016》的專題盤點中，涌現(xiàn)了像 Flexbox 游樂場、Shader 圖像變換特效、純 CSS 實現(xiàn)的雪橇犬等眾多優(yōu)秀的前端作品，我們也直觀的體會到前端開發(fā)者們豐富的想象力與創(chuàng)造力。（注：2016 年優(yōu)秀作品可以在《2016 年 10 個最佳的 CodePen 作品》文章中詳細了解。）那么，今年 CodePen 上又沉淀了哪些創(chuàng)意、有趣的作品呢？隨小獅一起先睹為快吧！
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
在這個作品中，你可以通過調(diào)整窗口的大小更換星球大戰(zhàn)中的人物角色。作品應(yīng)用了 CSS 媒體查詢特性進行實現(xiàn)。
項目地址：【傳送門】
5.Winter Tidings
這是一個非常有意境的純 CSS 作品。流暢的動畫，悅耳的音樂，漂亮的圖像帶你探尋冬日里神秘的森林。
項目地址：【傳送門】
6.Canvas Orbital Trails
一個奇妙、有趣的軌跡運動作品。你可以在屏幕上點擊、拖動生成出不同的軌跡線路。
項目地址：【傳送門】
7.Showcase Car
這款作品是由純 CSS 實現(xiàn)的 3D 汽車模型演示。通過選擇復(fù)選框的內(nèi)容，你還可以看到汽車的細節(jié)與效果展示，例如打開車燈、車門、車窗等，為汽車增添陰影效果，或使其移動一圈。
項目地址：【傳送門】
8.Rainbow Star Wave
彩虹星浪是一款酷炫、有趣的作品，作者 Misha Tsankashvili 利用 HTML 與 CSS 關(guān)鍵幀動畫制作而成。你也可以在 CodePen 的編輯器中獲取代碼，通過調(diào)整來實現(xiàn)其他的形狀與動畫。
項目地址：【傳送門】
9.The Color Averager
顏色平衡器是一個非常實用的 Demo. 通過選擇兩種不同的顏色，你可以看到顏色搭配后的效果。
項目地址：【傳送門】
10.Chill the Lion
Chill the Lion 是一個基于 ThreeJS 制作的 WebGL 示例。它由一個像素小獅子和風扇組成，你可以移動、點擊鼠標來移動風扇，并控制風量逗小獅子開心。
另外，此作者還創(chuàng)作了 Sneeze The Dragon 和 Cat vs Ball of Wool 等優(yōu)秀的作品，有興趣的朋友也可以看看。
項目地址：【傳送門】
11.Squarebreath
這個 Demo 的作者也相當?shù)膮柡?。他利用?CSS 關(guān)鍵幀動畫、過渡與延時屬性，打造出了一個波浪式的彩色網(wǎng)格對齊效果。
項目地址：【傳送門】
12.TinyPolyWorld
TinyPolyWorld 是基于 Three.js 制作的 3D 飛行演示。你可以在 3D 環(huán)境中利用鼠標移動飛機，體驗飛機移動時的流暢動作，觀察飛機的動態(tài)陰影以及色彩搭配。
項目地址：【傳送門】
13.Super Speed Snowmountain Survival
又是一款利用 CSS 與 JS 實現(xiàn)的滑雪小游戲。只要不被樹擊中，你就能不斷的獲得分數(shù)。
項目地址：【傳送門】
14.4D Perspective
這款作品將通過酷炫的動畫與過渡效果，帶你體驗 4D 視角。
項目地址：【傳送門】
15.Snake game
作為經(jīng)典的益智類游戲《貪吃蛇》想必大家不會陌生，這款作品就利用 CSS 與 JS 進行了簡單的重制，感興趣的朋友可以來感受一下。
項目地址：【傳送門】
感謝你的閱讀。若你有所收獲，歡迎點贊與分享。
注：
如需轉(zhuǎn)載，煩請按下方注明出處信息，謝謝！
部分內(nèi)容源自：The Best of CodePen for 2017
作者：IT程序獅
原文地址：https://zhuanlan.zhihu.com/p/32511607
