2018年3月十大好玩的CODE PEN

最新 03-07

英文：tutorialzine 譯文：眾成翻譯/betseyliu

http://zcfy.cc/article/10-amazing-codepen-demos-for-march-2018

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

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

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

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

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

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

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

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

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

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

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

打地鼠變成了打兔子遊戲，看看你能得多少分吧！

覺得本文對你有幫助？請分享給更多人

關注「前端大全」，提升前端技能

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 前端大全 的精彩文章:

Donut progress bar