那些有趣的codepen專案

那些有趣的codepen專案

codepen是一個線上的前端程式碼編輯執行的網站，支援前端現今的眾多技術，比如babel，coffeescript， typescript， scss，less，stylus。可以用於線上展示demo或者程式碼。

codepen目前專案眾多，其中也不乏很多優秀的作品，本期週刊將把一些過目不忘，實用又有趣的專案，我收藏的全部家底兒都推薦給大家。不用言謝，點贊支援。

文章超長，有五個部分

1.可以當做頁面背景的圖形類專案

2.小遊戲

3.可以提升逼格的loading專案

4.css物件

5.有趣的專案

一. 可以當做頁面背景的圖形類專案

一個酷炫的網站怎麼能缺少一個酷炫的動態背景呢？，看看下面這些藝術般的創意實現吧
複製程式碼

流動的海洋 Fluid

https://codepen.io/shamir/pen/JEMovg

流動的彩虹 Psychedelic waves

https://codepen.io/Yakudoo/pen/rJjOJx

時空穿梭 Strange Attactor

https://codepen.io/thepheer/pen/LGyZeW

黑色旋風 Perlin Noise Vector Field

https://codepen.io/shubniggurath/pen/rYWBvL

彩色星空 Codevember #10

https://codepen.io/gotoandplaynowtoo/pen/aVJEbq

躁動的粒子 Triangle Springs

https://codepen.io/Kadae/pen/vKjmpB

流光溢彩 Triangle Springs

https://codepen.io/arianr/pen/OXGoOd

暗流湧動 Particle Wave

https://codepen.io/Supercopra/pen/gvNKGN?editors=0010#0

光波 wave

https://codepen.io/dpdknl/pen/gXoEMV

消散的煙花 STARDUST

https://codepen.io/plasm/pen/eyKzgG

寂寞焰火 Rising colors

https://codepen.io/octopus11/pen/reqNqM

璀璨星空 GLSL: GPGPU particles

https://codepen.io/shubniggurath/pen/RQKgWg

過眼雲煙 GLSL: Marble noise

https://codepen.io/shubniggurath/pen/dZQOMm

炙熱熔岩 GLSL: Coral Blooms

https://codepen.io/shubniggurath/pen/vpNxWN

馬賽克之歌 8bits isopleths

https://codepen.io/Mamboleoo/pen/bLWrbx

流光 Daily Pen #12 - Treasure

https://codepen.io/kelvinh111/pen/ZrJOvR

https://codepen.io/YusukeNakaya/pen/BmYGON

洋流 Daily Pen #18 - Flow

https://codepen.io/kelvinh111/pen/ZrxmrE

極光 Weird threads

https://codepen.io/terabaud/pen/bYmgaY

靈魂出鞘 Particle Noise

https://codepen.io/ajm13/pen/qraGKY

燃燒綻放 Particle Noise

https://codepen.io/ajm13/pen/aWogXd

生化危機 GLSL: Infinite Voronoi Zoom

https://codepen.io/shubniggurath/pen/JMzQRw

華麗光環 CreateJS: Ghost Donut

https://codepen.io/createjs/pen/VrXzYN

暗夜空間 GLSL: Gem Soup

https://codepen.io/shubniggurath/pen/vWQmOr

質樸的色塊 Voronoi Graffiti

https://codepen.io/elifitch/pen/rglbq

還有一些沒有截圖，也還是比較好的，如果手還沒累，可以接著繼續點下面連結。

隨機生成的圖形

Voronoi Graffiti

隨機生成的圖形

Love and Peace

YurbanisM 隨機生成的藤蔓

lılıııllıı v 隨機生成的城市

issues

wip -cloud particles test 蒸汽

glittering particle

Flow Field, Step 4 - Customisable

[1] #Codevember - Galaxy

Whirl 2

二.小遊戲

擼點小遊戲解解悶
複製程式碼

俄羅斯方塊 Tetris the game

https://codepen.io/iftrrtrn/pen/EKwJLo?limit=all&page=15&q=game

毀鍵盤的勁舞團

https://codepen.io/arkhlima/pen/MypWbv?limit=all&page=17&q=game

打槍之類的

https://codepen.io/haidang/pen/zRLppr?limit=all&page=18&q=game

扳道工 Game of Trains (PURE CSS/JS, no tricks)

https://codepen.io/ghostreef/pen/ZXjqJO?limit=all&page=28&q=game

2048 game

https://codepen.io/camsong/pen/wcKrg

還沒搞明白怎麼玩兒 Puzzle Game

https://codepen.io/mohebifar/pen/LVGWqM?limit=all&page=6&q=game

不知道叫什麼，暫且叫堆麵包吧 Tower Blocks

https://codepen.io/steveg3003/pen/ppLQNW

畫素吃蘑菇 game

https://codepen.io/arshdkhn1/pen/QKkvJv

賽車

https://codepen.io/johan-tirholm/pen/PGYExJ?limit=all&page=7&q=game

拼圖 Puzzle Game

https://codepen.io/karimnaaji/pen/uEleL?limit=all&page=15&q=game

Pure CSS & Responsive Tic-Tac-Toe (Modern Browser Only)​

codepen.io

https://codepen.io/karimnaaji/pen/uEleL?limit=all&page=15&q=game

智商高玩不了的五子棋 Pure CSS & Responsive Tic-Tac-Toe (Modern Browser Only)

https://codepen.io/saawsan/pen/wpXGWQ

3D 飛行，可以不是個遊戲，沒有碰撞檢測 TinyPolyWorld - ThreeJS experiements.

https://codepen.io/Zultan/pen/mwGZBP

貪吃蛇 Retro Snake Game

https://codepen.io/mr-moon/pen/YYvwap

無聊的兵乓球 Unbeatable Pong Game

https://codepen.io/satyamdev/pen/pdMmBp

轉盤

https://codepen.io/n7best/pen/EtFcH

三. 可以提升逼格的Loading專案

菊花看煩了沒？來點不一樣的動畫
複製程式碼

先來點正常的 Spin it!! - CSS Spinners & Loaders

https://codepen.io/rajatkantinandi/pen/vdxzaV

CSS3 Loading animations

https://codepen.io/Manoz/pen/pydxK

浪起來 Bounded Wave Loader

https://codepen.io/zFunx/pen/gXjvpb

瘋狂的齒輪 #codevember - 18: Motors

https://codepen.io/ilithya/pen/LOJGgm

巴洛克星盤 Modular SVG Animation Experiment

https://codepen.io/DCtheTall/pen/KWpdRV

泡泡 Spin it!! - CSS Spinners & Loaders

https://codepen.io/rajatkantinandi/pen/vdxzaV

畫素奔跑的小人 DOT RUNNING

https://codepen.io/kimmy/pen/mJNXXr

SVG動畫 animated svg logo

https://codepen.io/NorahSay/pen/MraBzp

純CSS 動畫 Only CSS: Donut

https://codepen.io/YusukeNakaya/pen/ypyVKO

扭曲的多米諾 純CSS Infinite twisting strip with oscillating saturation and lightness (no JS)

https://codepen.io/thebabydino/pen/NXqpez

投降轉圈的小人 3D flashing Moose

https://codepen.io/flashingmoose/pen/vNQELw

純css 有點像水母 Jellyfish Animation

https://codepen.io/mkmueller/pen/keAbx

小火箭 Day 10 -#codevember - Rocket

https://codepen.io/cassie-codes/pen/ZaeaoO

購物類 loading

https://codepen.io/sdras/pen/GOBGjg

出行類Loading World Locations

https://codepen.io/chrisgannon/pen/GOYLbY

視窗 Better Boilerplate SVG Hero Animation

https://codepen.io/matchboxhero/pen/NXwVGR

小火車 Subway Train Icon Animation

https://codepen.io/codyogden/pen/OpyPoN

地球自轉 Animated SVG - Dribbble Debut

https://codepen.io/taiwei426/pen/EVqMaX

你的頁面還沒出鍋 Faasos Loader

https://codepen.io/madhusudhand/pen/QayaWN

俄羅斯方塊 Tetris Loader

https://codepen.io/charlottejoy/pen/aEwKMB

擺球 CSS Newton's Cradle

https://codepen.io/wagnermoschini/pen/RxooKO

波浪 Procedural Sunrise

https://codepen.io/zachernuk/pen/aJgYvN

純css 迴圈翻動的紙片 cube-loader

https://codepen.io/menem/pen/akPvEy

太極 ☯ with HTML + CSS, step #8

Lokomotive

Codevember(7)

CSS Image Course: Loading Bars

四. CSS物件

一生二，二生三，css生萬物
複製程式碼

可愛的哈士奇 Alex the CSS Husky

https://codepen.io/davidkpiano/pen/wMqXea

胖 CSS Puns - Obese

https://codepen.io/KazikM/pen/qjoJJZ

咖啡機，做一杯咖啡，其實可以用於loading等待 Coffee Machine CSS Animation

https://codepen.io/jenningscreate/pen/pdMMZJ

關燈睡覺 Catsomnia

https://codepen.io/alvov/pen/wddJOQ

無顏鬼，表情很對 No face

https://codepen.io/aepicos/pen/wPQNoZ

聖誕用得上 Santa Claus With CSSLighthouse ❄️

https://codepen.io/isacdias/pen/ZBwYaO

遊輪 ship/cruise!

https://codepen.io/lilianqian/pen/YEzNLR

生日蛋糕 #codevember Nov 2nd Cake randomizer

https://codepen.io/indyplanets/pen/WXrOYa

電刑 Rube Goldberg's Monster

https://codepen.io/joshbader/pen/PJWjEQ

蛋糕 Codevember 002: Cake

https://codepen.io/cobra_winfrey/pen/LOprGM

FrankenBreakfast

https://codepen.io/iggPen/pen/LzZWwE

CSS 四季動畫 Animated CSS Seasons

https://codepen.io/agathaco/pen/rpZoYd

士兵 Parallax Toy Soldiers

翻船 CSS Puns - Titanic

燈塔動畫 Lighthouse ❄️

水母 #Codevember 19 - Ocean

長勁鹿 #Codevember Day 29: Giraffe

時鐘 SVG/CSS Clock [WebKit/FF/Opera]

Codevember #3: TreeCodevember #3: Tree​

codepen.io

CSS Puns - Parthenon

Codevember 3 Tree - Snowglobe

Animated Weather Cards

Codevember #03 Tree

五. 有趣的專案

身中降龍十八掌，筋脈盡斷後的狀態， what power

https://codepen.io/ge1doot/pen/LpLLQa

The Last Experience

https://codepen.io/ge1doot/pen/LkdOwj

很無聊的一個專案 Kitschy Animated SVG Mardi Gras Parade

https://codepen.io/WhizofaWiz/pen/MYJLpX

無盡之門 Endless Hallway

https://codepen.io/cobra_winfrey/pen/PQNjKw

精緻的時鐘

https://codepen.io/vineethtr/pen/GvROZV

碼農獨愛，裝B神器 Text Image Mosaic

https://codepen.io/dudleystorey/pen/EbOqwa

字型特效 Only CSS: Text Spot Light

https://codepen.io/YusukeNakaya/pen/KyKJBE

有點刁的圖片切換效果 THREE Image Transition

https://codepen.io/zadvorsky/pen/PNXbGo

延時攝影的效果 Drawing with CSS3 mix-blend-mode

https://codepen.io/clockmaker/pen/vNyjxa

需要填寫銀行卡專案可以直接使用 Daily UI #002: Credit Card Checkout

https://codepen.io/supah/pen/OMdPpW