那些有趣的codepen项目
codepen是一个在线的前端代码编辑运行的网站,支持前端现今的众多技术,比如babel,coffeescript, typescript, scss,less,stylus。可以用于在线展示demo或者代码。
codepen目前项目众多,其中也不乏很多优秀的作品,本期周刊将把一些过目不忘,实用又有趣的项目,我收藏的全部家底儿都推荐给大家。不用言谢,点赞支持。
文章超长,有五个部分
1.可以当做页面背景的图形类项目
2.小游戏
3.可以提升逼格的loading项目
4.css物件
5.有趣的项目
一. 可以当做页面背景的图形类项目
一个酷炫的网站怎么能缺少一个酷炫的动态背景呢?,看看下面这些艺术般的创意实现吧
复制代码
流动的海洋 Fluid
流动的彩虹 Psychedelic waves
时空穿梭 Strange Attactor
黑色旋风 Perlin Noise Vector Field
彩色星空 Codevember #10
躁动的粒子 Triangle Springs
流光溢彩 Triangle Springs
暗流涌动 Particle Wave
光波 wave
消散的烟花 STARDUST
寂寞焰火 Rising colors
过眼云烟 GLSL: Marble noise
炙热熔岩 GLSL: Coral Blooms
马赛克之歌 8bits isopleths
灵魂出鞘 Particle Noise
燃烧绽放 Particle Noise
生化危机 GLSL: Infinite Voronoi Zoom
暗夜空间 GLSL: Gem Soup
质朴的色块 Voronoi Graffiti
还有一些没有截图,也还是比较好的,如果手还没累,可以接着继续点下面链接。
随机生成的图形
随机生成的图形
YurbanisM 随机生成的藤蔓
lılıııllıı v 随机生成的城市
Flow Field, Step 4 - Customisable
二.小游戏
撸点小游戏解解闷
复制代码
俄罗斯方块 Tetris the game
毁键盘的劲舞团
打枪之类的
扳道工 Game of Trains (PURE CSS/JS, no tricks)
还没搞明白怎么玩儿 Puzzle Game
不知道叫什么,暂且叫堆面包吧 Tower Blocks
像素吃蘑菇 game
赛车
拼图 Puzzle Game
智商高玩不了的五子棋 Pure CSS & Responsive Tic-Tac-Toe (Modern Browser Only)
3D 飞行,可以不是个游戏,没有碰撞检测 TinyPolyWorld - ThreeJS experiements.
贪吃蛇 Retro Snake Game
无聊的兵乓球 Unbeatable Pong Game
转盘
三. 可以提升逼格的Loading项目
菊花看烦了没?来点不一样的动画
复制代码
先来点正常的 Spin it!! - CSS Spinners & Loaders
疯狂的齿轮 #codevember - 18: Motors
巴洛克星盘 Modular SVG Animation Experiment
泡泡 Spin it!! - CSS Spinners & Loaders
像素奔跑的小人 DOT RUNNING
SVG动画 animated svg logo
纯CSS 动画 Only CSS: Donut
扭曲的多米诺 纯CSS Infinite twisting strip with oscillating saturation and lightness (no JS)
投降转圈的小人 3D flashing Moose
纯css 有点像水母 Jellyfish Animation
小火箭 Day 10 -#codevember - Rocket
购物类 loading
出行类Loading World Locations
窗口 Better Boilerplate SVG Hero Animation
小火车 Subway Train Icon Animation
地球自转 Animated SVG - Dribbble Debut
你的页面还没出锅 Faasos Loader
俄罗斯方块 Tetris Loader
纯css 循环翻动的纸片 cube-loader
CSS Image Course: Loading Bars
四. CSS物件
一生二,二生三,css生万物
复制代码
可爱的哈士奇 Alex the CSS Husky
咖啡机,做一杯咖啡,其实可以用于loading等待 Coffee Machine CSS Animation
关灯睡觉 Catsomnia
无颜鬼,表情很对 No face
圣诞用得上 Santa Claus With CSSLighthouse ❄️
游轮 ship/cruise!
生日蛋糕 #codevember Nov 2nd Cake randomizer
CSS 四季动画 Animated CSS Seasons
灯塔动画 Lighthouse ❄️
长劲鹿 #Codevember Day 29: Giraffe
时钟 SVG/CSS Clock [WebKit/FF/Opera]
Codevember #3: TreeCodevember #3: Tree
五. 有趣的项目
身中降龙十八掌,筋脉尽断后的状态, what power
很无聊的一个项目 Kitschy Animated SVG Mardi Gras Parade
无尽之门 Endless Hallway
精致的时钟
码农独爱,装B神器 Text Image Mosaic
字体特效 Only CSS: Text Spot Light
有点刁的图片切换效果 THREE Image Transition
延时摄影的效果 Drawing with CSS3 mix-blend-mode
需要填写银行卡项目可以直接使用 Daily UI #002: Credit Card Checkout