那些有趣的codepen项目

百度外卖大前端技术团
15,527 阅读4分钟

那些有趣的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图标Codevember #3: Tree

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


avatar
文章
阅读
粉丝

友情链接：