2018年3月十大好玩的CODE PEN

發表於2018-03-06

WEB開發社群總是不乏天才型的程式設計師、設計師和藝術家,正是由於他們不斷推陳出新, 引領著WEB的發展。在codepen上,每天都有數以百計的優秀作品誕生。

這篇文章中, 我們將回顧下3月份的優秀codepen demo, 趕快來看看吧!


donut-progress-bar.png

Donut progress bar

在這個demo中, 進度條是由”辛普森家族”成員的圖片組成的,每點選下箭頭, 就會出現一張新的照片。


enery.png

Energy 3

這個充滿魔性的demo展示了很多射向不同方向的線條的運動軌跡以及顏色變化, 動畫很炫, 動作很酷, 顏色也很抓眼球哦! animations, amazing movements and eye-catching colors.


illusion.png

Just an illusion

通過點選和拖動滑鼠就就可以在這個demo裡面繪製出一串小球體, 他們之後會圍繞著Y軸旋轉, 組成帶有3D效果的影像。 你可以新增任意多的球體,發揮你的想象力吧!


look-alive-new.png

Look Alive

這是一個使用WebGL和Threejs建立的人眼3D模型, 眼球可以跟隨著你的滑鼠箭頭移動。 眼球的真實度很高, 同時陰影和光照效果也很棒!


spiral-art-new.png

Spiral Art maker

這個demo可以繪製一些有趣的輻射圖形,呈現不同的動作。你可以修改線條個數, 步長、線寬、繪製速度以及其他屬性。這就是個萬花筒啊!


screen-effect.png

Live Screen Effect

這個demo展示了一個正在瀏覽codepen主站的筆記本,通過CSS matrix 3D 製作而成。 看起來這就像一個真正的網頁, 你可以操作頁面,頁面滾動, 點選元素都沒問題。


tunnel.png

Tunnel

這個demo帶你來一次穿越虛擬隧道的旅行,可以移動滑鼠來四處觀望哦!整個畫面質量極高, 陰影和反射都很真實,不僅這樣, 這個demo的效能也很棒, 沒有卡頓!


animated-form.png

Animated SVG Avatar

這個好玩的登入頁面是有動態生成的SVG元素組成, 頭像可以跟隨者你輸入資訊移動,做出動畫。當你輸入email的時候, 它會看著你輸入的內容, 而當你輸入密碼的時候,他就矇住了眼鏡,好萌啊!


flashing-moose.png

3D flashing Moose

這個好玩的3D小人可以繞圈移動, 動作流暢自然,有動態的陰影和光效,動畫很棒,關鍵是,這是一個純CSS的demo啊!


rabbit-hit-and-hide.png

Rabbit hit and hide game

打地鼠變成了打兔子游戲,看看你能得多少分吧!

相關文章