WEB開發社群總是不乏天才型的程式設計師、設計師和藝術家,正是由於他們不斷推陳出新, 引領著WEB的發展。在codepen上,每天都有數以百計的優秀作品誕生。
這篇文章中, 我們將回顧下3月份的優秀codepen demo, 趕快來看看吧!
Donut progress bar
在這個demo中, 進度條是由”辛普森家族”成員的圖片組成的,每點選下箭頭, 就會出現一張新的照片。
Energy 3
這個充滿魔性的demo展示了很多射向不同方向的線條的運動軌跡以及顏色變化, 動畫很炫, 動作很酷, 顏色也很抓眼球哦! animations, amazing movements and eye-catching colors.
Just an illusion
通過點選和拖動滑鼠就就可以在這個demo裡面繪製出一串小球體, 他們之後會圍繞著Y軸旋轉, 組成帶有3D效果的影像。 你可以新增任意多的球體,發揮你的想象力吧!
Look Alive
這是一個使用WebGL和Threejs建立的人眼3D模型, 眼球可以跟隨著你的滑鼠箭頭移動。 眼球的真實度很高, 同時陰影和光照效果也很棒!
Spiral Art maker
這個demo可以繪製一些有趣的輻射圖形,呈現不同的動作。你可以修改線條個數, 步長、線寬、繪製速度以及其他屬性。這就是個萬花筒啊!
Live Screen Effect
這個demo展示了一個正在瀏覽codepen主站的筆記本,通過CSS matrix 3D 製作而成。 看起來這就像一個真正的網頁, 你可以操作頁面,頁面滾動, 點選元素都沒問題。
Tunnel
這個demo帶你來一次穿越虛擬隧道的旅行,可以移動滑鼠來四處觀望哦!整個畫面質量極高, 陰影和反射都很真實,不僅這樣, 這個demo的效能也很棒, 沒有卡頓!
Animated SVG Avatar
這個好玩的登入頁面是有動態生成的SVG元素組成, 頭像可以跟隨者你輸入資訊移動,做出動畫。當你輸入email的時候, 它會看著你輸入的內容, 而當你輸入密碼的時候,他就矇住了眼鏡,好萌啊!
3D flashing Moose
這個好玩的3D小人可以繞圈移動, 動作流暢自然,有動態的陰影和光效,動畫很棒,關鍵是,這是一個純CSS的demo啊!
Rabbit hit and hide game
打地鼠變成了打兔子游戲,看看你能得多少分吧!