Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/merrier/awesome-websites

list of awesome websites
https://github.com/merrier/awesome-websites

List: awesome-websites

Last synced: 3 months ago
JSON representation

list of awesome websites

Awesome Lists containing this project

README 

        
# awesome-websites



总结了一些很实用值得收藏的站点，类型不限，会持续更新



## 目录



* [VR相关](#VR相关)

* [个人站点](#个人站点)

* [人工智能](#人工智能)

* [优秀网站](#优秀网站)

* [创意十足](#创意十足)

* [图标库](#图标库)

* [在线工具](#在线工具)

* [在线简历](#在线简历)

* [官方网站](#官方网站)

* [数据分析工具](#数据分析工具)

* [炫酷特效](#炫酷特效)

* [社区](#社区)

* [素材下载](#素材下载)

* [视频学习](#视频学习)

* [配色方案](#配色方案)

* [静态资源库](#静态资源库)

* [音效素材库](#音效素材库)

* [Hove特效](#Hove特效)

* [Wordpress](#Wordpress)

* [值得收藏](#值得收藏)

* [电子书](#电子书)

* [网站导航](#网站导航)

* [资源下载](#资源下载)

* [边学边玩](#边学边玩)

* [程序员工具](#程序员工具)



## VR相关



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [VR网站仓库](http://www.vrfavs.com/) | 汇集了国外涉及到VR的大部分知名网站 | `VR`、`网站导航` |



## 个人站点



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [Bestvist博客](https://www.bestvist.com/h) | 作者的博客主要是前端开发相关工具的分享，同时比较重视用户体验，有很多有意思的干货 | `前端工具`、`用户体验` |

| [KieSun](https://github.com/KieSun/Dream) | 作者是掘金年度作者，维护了一个 14K star的开源项目，并出版了小册前端面试之道 | `掘金`、`面试` |

| [lifesinger](https://github.com/lifesinger/blog/issues) | 阿里玉伯的个人博客，有很多非技术文章 | `阿里`、`玉伯` |

| [10081677wc](https://github.com/10081677wc/blog/issues) | 字节跳动公司某前端员工的博客 | `博客`、`字节跳动`、`前端` |

| [@bosslogic](https://www.instagram.com/bosslogic/) | 这是一位大神，你在网上看到的 90% 的漫威非官方海报都可能出自他手 | `漫威`、`海报`、`instagram` |

| [Aanad Sharma](http://aprilzero.com/) | 用各种wearable记录自己的数据，特效特别酷炫 | `可视化`、`酷炫`、`创意` |

| [AllenChou博客](http://www.cnblogs.com/AllenChou/) | 这位前端开发者的博客都比较基础，而且很多都是总结性质的，很适合给初学者开扩视野 | `博客`、`前端基础` |

| [anjia blog](https://github.com/anjia/blog) | 主要是CSS相关文章，还有JS以及Vue。 | `博客`、`CSS`、`JS`、`Vue` |

| [Auăleu](http://aualeu.ro/) | 风格诡谲暗黑手绘草稿儿一样的网站，一段充满特效的旅程就此开始 | `特效`、`暗黑`、`手绘` |

| [Bret Victor](http://worrydream.com/) | 应用多种媒介来展示不同内容，博主是这个时代少见的同时精通电子学、编程、交互设计的全能型天才。 | `天才`、`交互`、`特效` |

| [chokcoco](http://www.cnblogs.com/coco1s/) | 腾讯的一位前端大牛，github有1K+follower，前端基础很好，值得学习 | `博客`、`前端`、`CSS`、`腾讯` |

| [creeperyang](https://github.com/creeperyang/blog) | 主要是前端领域的基础知识和性能优化类文章 | `博客`、`前端基础`、`性能优化` |

| [Dalin Huang](https://dalinhuang99.github.io/) | Dalin Huang（全栈工程师）的个人博客，做的很有意思 | `博客`、`创意`、`视差` |

| [Dron博客](https://ucren.com/blog/) | 作者的文章大多都是从某一问题出发进行讲解，不涉及框架工具之类，很有意思 | `博客` |

| [Girl With a Camera](http://girlwithacamera.co.uk/) | Ashley 的个人博客，一位外国妹子，主题就是摄影作品展示 | `摄影` |

| [Harttle Land](http://harttle.com/) | 一个研究生自学前端的大牛，拿到了BAT的Special Offer，很多文章都写得非常好！ | `博客`、`大牛` |

| [Henry Brown](https://henrybrown.me/) | 没有乱入的特效，简单朴素，但是很清晰地展示了自己的作品 | `博客`、`简单朴素` |

| [林鑫的个人博客](https://github.com/lin-xin/blog/) | 文章内容包括JS、HTML5、CSS3、Vue、Node.js、React Native、小程序等方面。 | `博客`、`前端` |

| [Jerry Qu的小站](https://imququ.com/) | 专注前端开发，同时也有一些关于HTTP和Web服务器的文章 | `博客`、`前端` |

| [JS流程图](https://github.com/laihuamin/JS-total) | 大部分都是基础知识，少量框架相关 | `博客`、`前端基础` |

| [KENJI ENDO](http://kenjiendo.com/) | 将音乐与设计结合到一起的个人网站，动效的设计可以称得上惊艳。 | `音乐`、`设计`、`特效` |

| [Last Blog](http://blog.dingjian.name/#/) | 仿github设计的个人博客，很有想法 | `博客`、`github`、`创意` |

| [leehey's blog](https://github.com/lcxfs1991/blog) | 李成熙，腾讯云高级工程师。专注于性能优化、工程化和小程序服务。 | `博客`、`腾讯`、`性能优化`、`工程化` |

| [Litten博客](http://litten.me/) | 分享自己的生活多于前端 | `博客` |

| [Matrix67.com](http://www.matrix67.com/) | 极简主义的代表，可以尝试着随便点点 | `极简主义` |

| [Maxodgen的作品展示](http://maxogden.github.io/slides/nodepdx/index.html) | 3D立体博客，可以通过WSAD+空格+鼠标进行视角转换 | `博客`、`3D` |

| [mosesfinlay](http://mosesfinlay.com/) | 12岁，4年码龄，你凭什么不努力。。 | `12岁` |

| [NCZOnline](https://www.nczonline.net/) | JS大神Zakas作者的个人博客，如果你不知道Zakas是谁。。 | `博客`、`大神` |

| [nerisson.fr](http://www.nerisson.fr/) | 黑色主色调搭配着怪诞的插画，个人风格非常强烈 | `怪诞`、`风格` |

| [Objeto Rocha](http://objetorocha.com/) | 图片的投影会随着鼠标的位置发生变化，很有趣 | `交互`、`创意` |

| [Pauline Osmont](http://www.paulineosmont.com/) | 精致的配色，精致的排版，简单精致的特效 | `配色`、`简单`、`精致` |

| [PHODAL](https://www.phodal.com/) | 一个拿了BAT头条小米领英等公司十几个offer的大牛。。 | `博客`、`大牛` |

| [pigcan](https://github.com/pigcan/blog) | webpack和git相关文章占多数，目前总共16篇文章 | `博客`、`webpack` |

| [Pomy blog](https://github.com/dwqs/blog) | 主要分享基础知识和Vue相关知识。 | `博客`、`前端基础`、`Vue` |

| [Potery's Blog](http://blog.poetries.top/) | 首页很炫，作者并不算前端大牛，但是擅长总结，内容很实用 | `炫酷` |

| [Romain Wurtz](https://www.t3kila.com/) | 鼠标滑过特效是水墨风 | `特效`、`水墨` |

| [saber.love](https://saber.love/) | 这是一个充满福利的网站，懂的自然懂 | `福利`、`二次元` |

| [TG-路虽远，无所畏](http://ghmagical.com/) | 作者是一个前端大牛，不仅有自己开发的移动端UI框架，还有三本前端书籍 | `博客`、`大牛` |

| [the-front-end-knowledge-you-may-not-know](https://github.com/justjavac/the-front-end-knowledge-you-may-not-know/issues?page=1&q=is:issue+is:open) | 你需要知道的前端知识，多是一些很冷门但很基础的知识。 | `前端基础`、`冷门` |

| [Tobias van Schneider](http://www.vanschneider.com/) | 一个跨领域多学科设计师，前Spotify的首席设计师和艺术指导，设计界的网红 | `设计`、`网红` |

| [Web前端开发](http://www.css88.com/) | 专注前端开发,关注用户体验,内容很丰富,不仅有前端相关的新闻,还有一些教程资源,同时还有各种中文文档,是目前为止翻译的最好的中文文档,最重要的是,这竟然是某个前端开发工程师的个人网站! | `教程`、`文档`、`资源` |

| [Wendy Shijia](http://www.wendyshijia.com/) | 简单大气，一目了然，独特的时间线以及信息表达方式 | `创意`、`简单` |

| [关于 JJ Ying](http://iconmoon.com/) | 排版很不错的一个网站，hover特效简单精致 | `特效`、`排版` |

| [冴羽的博客](https://github.com/mqyqingfeng/Blog) | 冴羽写博客的地方，预计写四个系列：JavaScript深入系列、JavaScript专题系列、ES6系列、React系列。 | `博客`、`JS`、`React` |

| [前端工匠](https://github.com/ljianshu/Blog) | 侧重于前端基础知识以及react、node和webpack等入门与底层原理分析 | `博客`、`前端基础`、`框架` |

| [叶蓝秋](http://www.yelanqiu.com/) | 很别致的一个网站，排版配色都很不错 | `排版`、`配色` |

| [叶赫先生](https://www.yeehee.cn/) | 有很多Wordpress、小程序相关的文章，同时网站特效很不错 | `Wordpress`、`小程序`、`特效` |

| [喵小二](http://miaoxiaoer.com/) | 一个交互型网站，可以尝试输入各种词，比如“呵呵” | `交互`、`人工智能` |

| [大冬瓜主页](http://dreamwq.com/home/) | 全屏滚动，特效很多 | `特效`、`全屏` |

| [奔跑中的奶酪](https://www.runningcheese.com/) | 作者喜欢分享，软件、工具、书籍等等。 | `分享` |

| [廖雪峰](http://www.liaoxuefeng.com/) | 廖雪峰，全栈工程师，python专家，关于前端的教程没有什么特色，可以作为补漏的教材吧。 | `博客`、`专家` |

| [彬Go的个人网站](http://www.bingo929.com/) | 一个老前端的个人网站，首页很酷 | `酷` |

| [我爱水煮鱼blog](https://blog.wpjam.com/) | 我爱水煮鱼是一个关注 WordPress 开源博客平台应用和互联网的独立 IT 博客。为广大 WordPress 爱好者提供了大量关于 WordPress 的插件、代码以及相关的建站经验分享，同时提供了 WordPress 主题制作与 WordPress 博客客户化等商业服务。 | `Wodpress` |

| [技术胖博客](http://jspang.com/) | 技术胖-胜洪宇关注web前端技术-前端免费视频第一博客，里面有很多免费的视频教程。 | `免费视频`、`教程` |

| [木易杨blog](https://github.com/yygmind/blog) | 前端进阶系列和Vue进阶系列写的很不错 | `进阶`、`Vue` |

| [梁少峰的个人博客](https://github.com/youngwind/blog) | 梁少峰的个人博客，有很多对于Vue、React的前端知识总结 | `Vue`、`React` |

| [楠哥说](https://mikelin.cn/) | wordpress搭建的博客，很有创造力 | `Wordpress` |

| [汤姆大叔的博客](http://www.cnblogs.com/tomxu/archive/2011/12/15/2288411.html) | 链接为汤姆大叔博客中的深入理解JavaScript系列文章，虽然不适合初学者，但是进阶还是知识满满 | `进阶`、`JS` |

| [浪里行舟](https://github.com/ljianshu/Blog) | 将近三十篇文章，多集中在基础知识和Vue | `前端基础`、`Vue` |

| [燕十八博客](http://www.yanshiba.com/) | 燕十八,PHP培训师,但是涉猎比较广,而且个人感觉讲的比较明白清楚,博客上的内容虽然比较少,但是肯定会有所帮助. | `PHP` |

| [知乎的刘看山](https://liukanshan.zhihu.com) | 刘看山作为知乎推出的吉祥物，其上线以来就饱受争议（大部分因为长相），不过这个小站做的还是蛮不错的 | `知乎`、`吉祥物` |

| [神族九帝](https://shenzjd.com/) | 一个专注于分享的网站 | `分享` |

| [程志辉博客](https://www.qqzmly.com/) | 程志辉的个人博客 | `Typecho` |

| [第5维度™工作室](http://glexe.com/#/intro) | 很酷炫的一个个人站，一个 设计+代码 多修的“手艺人”。 | `酷炫`、`设计` |

| [素云阁](http://www.syg315.com/) | 简洁大气，交互很有个性，背景音乐也不错，博主是湖南卫视芒果TV视觉设计师 | `简洁`、`交互` |

| [翁天信的个人博客](https://www.dandyweng.com/) | 少年博主，每年都会进行一次改版，每次改版都能看到他的切实成长(摄影前端写作身高等各方各面的) | `摄影` |

| [莫烦Python](https://morvanzhou.github.io/tutorials/) | 机器学习大神莫烦的个人博客 | `机器学习`、`大神` |

| [车小胖的博客](http://blog.sina.com.cn/u/5691553152) | 关于网络方面的技术博客，作者对网络中的一些现象和技术点做了比较通透的解释。 | `网络` |

| [阮一峰](http://www.ruanyifeng.com/home.html) | 阮一峰，经济学博士，但是也是IT研究人员，主要专注于网站制作，他阅读量非常大，而且涉猎面比较广，相信这个网站教给你的不会局限于技术。 | `大神` |

| [阮一峰每周分享](https://www.yuque.com/ruanyf/share) | 每周五阮一峰都会在博客上记录过去一周，看到的值得分享的东西。 | `分享`、`阮一峰` |



## 人工智能



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [AiTechYun](http://www.atyun.com/) | 关于AI的各种信息，包括新闻和资源下载，旨在让大家更了解人工智能 | `网站导航`、`资源` |

| [scikit-learn](http://sklearn.lzjqsdd.com/) | 基于Python语言的机器学习工具，可以很轻松的实现分类、聚类、回归等 | `机器学习`、`Python` |

| [里米先生](https://blog.limiabc.com/) | wordpress主题，设计师的个人博客，简约大方，创意十足 | `Wordpress`、`设计`、`创意` |



## 优秀网站



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [Aquatilis Expedition](http://aquatilis.tv/aquatilis-expedition/) | 是一项为期三年的通过未知的史诗级水下之旅,探索世界上最不寻常的生物，网站动效和视觉效果很不错 | `生物`、`动效`、`视觉` |

| [Basics09](http://www.basics09.de/) | 通过点击手指添加不同乐器与和弦 | `音乐`、`创意` |

| [Ben the Bodyguard](http://benthebodyguard.com/) | 一段关于Ben来历的视频，营造出一个很酷的场景。它采用了很另类的视觉设计 | `酷`、`视觉` |

| [Bulma](https://bulma.io/) | Bulma是一个基于Flexbox的开源CSS框架，网站整体布局和设计都很精致 | `布局`、`设计` |

| [Canva](https://www.canva.com/) | 利用 Canva 的拖放功能和布局，可以设计、分享和打印名片、徽标、演示文稿及更多内容。 | `设计`、`分享` |

| [Codepen设计模式](https://codepen.io/guide) | codepen网站的设计模式 | `Codepen`、`设计模式` |

| [Grabient](https://www.grabient.com/) | 生成漂亮的CSS渐变，操作简单，网站设计也很棒 | `CSS`、`渐变`、`设计` |

| [GRAVUAL™](https://gravual.com/en/) | 位于比利时的一个平面设计工作室网站，一些hover特效蛮不错的 | `特效`、`设计` |

| [Hakim.se](https://hakim.se/) | 按钮的交互方式很特别 | `交互` |

| [Kepler.gl](https://uber.github.io/kepler.gl/#/) | Kepler.gl是Uber开发的一个强大的地理空间分析工具，可用于大规模数据集。 | `Uber`、`大数据` |

| [Oops Pages](http://oops.re/) | 404页面优秀设计案例展示 | `404`、`案例`、`设计` |

| [Rainy Mood](http://www.rainymood.com/) | 一款App的介绍视频，通过下雨打雷等音效让你身临其境 | `音效` |

| [Silk](http://weavesilk.com/) | 可以用鼠标随便涂画，有同名App | `涂画` |

| [Unsplash Source](https://source.unsplash.com/) | 一个简单的API，用于嵌入来自Unsplash的高分辨率照片。 | `API`、`Unsplash`、`照片` |

| [Uplabs](https://www.uplabs.com) | Uplabs是一个创意集中的社区，每天都会提供最好的特效灵感并提供下载 | `创意`、`特效`、`社区` |

| [VO2 Group](http://www.vo2-group.com/en) | 体会如何通过字体、颜色、排版表现力度和冲击感 | `字体`、`颜色`、`排版` |

| [WakaTime](https://wakatime.com/) | 跟踪项目花费的时间，需要安装插件 | `插件`、`项目` |

| [克洛伊摄影](http://www.sanyachloe.com/) | 专注于婚纱摄影的网站，网站做的很不错 | `摄影` |

| [创造狮](http://chuangzaoshi.com/) | 创造狮，一个创意工作者的导航，专注分享正版优质设计、前端、产品、运营的书签导航 | `创意`、`网站导航`、`分享` |



## 创意十足



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [权力的游戏3d地图导览](https://alex2wong.github.io/Game-of-Throne-Map/index.html) |  | `权利的游戏`、`3D地图` |

| [150 CSS Effects](https://1stwebdesigner.com/css-effects/) | 150 Amazing Examples of CSS Animation & Effects | `特效`、`CSS`、`动画` |

| [2018 Make Me Pulse](http://2018.makemepulse.com/) | 用canvas绘制了2018这四个数字，特效很赞 | `canvas`、`特效` |

| [68Design](http://www.68design.net/cool/) | 专门搜集国外高质量的网站，而且定期更新，非常酷炫 | `酷炫` |

| [Animista](http://animista.net) | 在线生成各种CSS动画 | `CSS动画` |

| [ASCIIFlow Infinity](http://asciiflow.com/) | 利用ASCII字符进行绘制，可以调整大小，自由绘制，可以绘制出类似于佛祖那样的代码。 | `ACSII`、`代码` |

| [bellwoods](https://bellwoods.xyz/) | 在高高的草地上跟着鸟儿去追逐风和探索五颜六色吧 | `交互` |

| [Bennett Feely的图案库](http://bennettfeely.com/gradients/) | 利用混合模式生成的CSS渐变图案 | `混合模式`、`CSS渐变` |

| [BonBon](http://simurai.com/archive/buttons/) | Simurai以其精湛的手法将border-radius发挥到了极致，其糖果按钮展示了各种奇妙的形状 | `按钮`、`糖果`、`border-radius` |

| [Browserhacks](http://browserhacks.com/) | Browserhacks是一个记录特定的CSS和JavaScript的Hack写法的列表。 | `Hack`、`CSS`、`JS` |

| [Codepip](https://codepip.com/) | 你可以在这里找到一些寓教于乐的游戏，目前有Flexbox和CSS Grid两款 | `游戏`、`Flexbox`、`Grid` |

| [Codrops](https://tympanus.net/codrops/) | 它有很多可以在线预览且兼具视觉化以及交互性的动效，每个案例后面都附有代码。 | `动效`、`资源` |

| [Conductor](http://www.mta.me/) | 一些美妙的线条，不断前进和交错，同时也会90度转弯，碰到时会展示出弹性，线条和背景的颜色会不断变化，但它们都有自己的生命周期，时间到了就会消失在幕布上，看看它们在画什么。 | `创意` |

| [CSS Animation](https://cssanimation.rocks/) | 关于CSS动画的文章，技巧和教程。 | `CSS动画`、`教程` |

| [CSS ICON](https://cssicon.space/#/) | 作者使用CSS绘制了很多小icon，其次页面做的也很精致 | `Icon` |

| [CSS-Tricks](https://css-tricks.com/) | 使用CSS时的一些技巧和注意事项 | `CSS`、`技巧` |

| [CSS3图案库](http://lea.verou.me/css3patterns/) | 展示了CSS渐变早在2011年就能够实现的效果 | `CSS渐变` |

| [CSS3悬停效果](http://www.uisdc.com/css3-hover-effects-tutorials) | 作者总结了17个有趣实用的CSS 3悬停效果教程，创意十足，非常酷炫！ | `酷炫`、`悬停` |

| [CSS图案库的SVG版实现](https://philiprogers.com/svgpatterns/) | 展示了SVG能够实现的简单CSS图案 | `SVG`、`图案` |

| [css抖动](http://www.webhek.com/post/css-shake.html) | css抖动插件，通过添加类名就可以给元素添加各式各样的抖动特效 | `抖动` |

| [CSS禅意花园](http://www.csszengarden.com) | 从视觉上形象地展示了基于CSS设计的网站所能达到的效果 | `视觉` |

| [Elasticode](http://www.elasticode.com/) | 如果设计动效时候没有灵感时可以参照Elasticode上各种丰富的交互动效，包括按钮的点击效果、页面切换/跳转、图文出现/消失、元素变换等效果。 | `动效`、`交互` |

| [FFF互动](http://fff.cmiscm.com/) | 各种H5特效，每种特效都有其独特的设计和功能 | `特效` |

| [Going Home](http://goinghome.302chanwoo.com/) | 一个带有简单交互的故事动画，通过鼠标点击使你融入故事中 | `交互`、`故事`、`动画` |

| [Grid Garden](https://cssgridgarden.com/) | Grid Garden是Codepip创建的一款寓教于乐的在线网页游戏，游戏共有28关。玩家可以通过过关的方式掌握CSS最新标准CSS Grid。 | `游戏`、`Grid` |

| [habitica](https://habitica.com/static/home) | 将TodoList游戏化，把你的真实生活当成游戏吧 | `TodoList`、`游戏` |

| [Heraclos](https://heraclosgame.com/) | 一个在线的用手柄进行的游戏，画面很好看，你控制一个女生进行探索。 | `游戏`、`视觉` |

| [Hone Hone Clock](http://blog.itmyhome.com/hone_hone_clock/) | 很火的一个人体时钟，可以直接看其源码引用，本质上是用flash实现的 | `时钟`、`flash` |

| [html5游戏](http://html5.huceo.com/) | 总结了很多html5做的小游戏 | `H5`、`游戏` |

| [HTML5爱心表白动画](http://www.html5tricks.com/demo/jiaoben1892/index.html) | 程序员做的纯HTML5爱心表白动画，值得学习！ | `H5`、`表白`、`动画` |

| [Learn Git Branching](https://learngitbranching.js.org/) | 以动画和闯关的形式来学习Git | `游戏`、`git` |

| [mermaid](https://mermaidjs.github.io/) | 采用类似Markdown的语法，通过单纯的文本生成图表和流程图 | `流程图`、`Markdown` |

| [MoshImages](https://getmosh.io/) | 给图片添加特效的网站，操作简单，还可以导出为gif，创意非凡！ | `图片`、`特效`、`创意` |

| [Nicetool](http://www.nicetool.net/) | 好工具网致力于收集和打造各种简单易用的在线工具，目前已有500多个工具。 | `工具` |

| [Oat the Goat](http://oatthegoat.co.nz/) | 这是一个以故事形式来展现的网站，动画很有感觉，所有的画面非常的漂亮，就像在看电影一样，同时网站还带有一至交互体验，让用户去选择。 | `故事`、`视觉`、`交互` |

| [Objeto Rocha](http://objetorocha.com/) | 图片的投影会随着鼠标的位置发生变化，很有趣 | `交互` |

| [One div](http://one-div.com/) | 这位站长制作了许多纯css图标，更不可思议的是，所有的图标只用到了一个标签！ | `CSS图标` |

| [packwire](https://www.packwire.com/) | 这个网站的特效都很不错。。 | `特效` |

| [pieces](http://species-in-pieces.com/) | 这是一个告诫人们物种灭绝的网站，通过碎片和动画的形式，非常生动 | `动画` |

| [Purecss Francine](http://diana-adrianne.com/purecss-francine/) | 纯CSS画的一幅油画，非常的逼真，只能用卧槽形容 | `CSS`、`油画` |

| [Regexper](https://regexper.com) | 使用铁路图将正则表达式可视化 | `正则`、`可视化` |

| [ro.me](http://www.ro.me/) | 通过webgl生成了一部电影，耐心的等待会有惊喜的 | `WebGL`、`电影` |

| [SandsPiel](https://sandspiel.club/) | 让不同颜色的沙子落到地上，你可以绘制一幅属于你的作品。 | `创意` |

| [Song Maker](https://musiclab.chromeexperiments.com/Song-Maker/) | SongMaker是Chrome音乐实验室的一项实验成果，它提供了任何人制作和共享歌曲的简单方法。 | `音乐`、`共享` |

| [spacegoo](http://www.spacegoo.com/) | 一个立体的三维空间，它能够旋转和点击，这种交互方式是以canvas元素+位图实现的，看上去不一般哦。 | `交互`、`canvas` |

| [Uplabs](https://www.uplabs.com) | Uplabs是一个创意集中的社区，每天都会提供最好的特效灵感并提供下载 | `创意`、`特效`、`社区` |

| [VisuAlgo](https://visualgo.net) | 通过动画的形式将数据结构和算法可视化，很酷 | `动画`、`数据结构`、`算法`、`可视化` |

| [WolframAlpha](https://www.wolframalpha.com/) | 将专家级的知识和能力带到所有职业和教育水平的最广泛人群中。 | `创意` |

| [WOW.js](http://mynameismatthieu.com/WOW/) | WOW.js是一个给页面添加滚动动画的JS插件，可以与Animate.css完美结合。 | `滚动动画`、`插件` |

| [伪元素实现CSS icon](http://nicolasgallagher.com/pure-css-gui-icons/demo/) | 伪元素大师Nicolas Gallagher将伪元素发挥到了极致，实现了一些常见icon | `icon`、`伪元素` |

| [帅到爆的设计](https://www.zhihu.com/question/25415121) | 知乎-有哪些一见到就感觉帅到爆的设计？ | `知乎`、`设计` |

| [王境泽/偷车贼/为所欲为等字幕梗生成器](https://sorry.bluerain.io/) | 字幕梗Gif生成器，目前已开源 | `字幕梗`、`gif` |



## 图标库



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [easyicon](http://www.easyicon.net/) | 是一个免费搜索图标的搜索引擎站点，国内非常不错的搜索图标的站点之一，收录了超过40万个精美PNG、ICO、YCNS图标，内容非常丰富，提供中文、英文、繁体中文语言界面。 | `图标` |

| [FLATICON](https://www.flaticon.com/) | 号称最大的免费图标数据库，有各种格式的icon。 | `图标` |

| [font-awesome](http://fontawesome.dashgame.com/) | 很适合前端开发人员的图标库，可以通过font属性控制图标大小、颜色以及旋转角度，还可以任意组合 | `font`、`图标` |

| [iconpng](http://www.iconpng.com/) | 是一个中文的在线图标搜索引擎，不仅可以搜索到大量的 PNG 格式图标，还有图标系列的集合可以下载，另外 IconPng 还支持图标的 tag 和图标分类，可以方便的找到自己想要找的大量类似图标 | `PNG`、`图标` |

| [ionicons](http://ionicons.com/) | 作为有1万star的的开源icon库，多而杂的图标肯定能够满足你，但是不太容易直接搜索查找 | `icon` |

| [Material icons](https://material.io/tools/icons/) | 提供各种类型的图标，包括SVG和PNG格式，同时也可以通过CSS引入 | `图标` |

| [material.io](https://material.io/icons/) | Google的图标库，数量实在是多，一定有你想要的 | `Google` |

| [包图网](https://ibaotu.com/) | 包图网的内容包括图标图片，图标素材，图标模板，图标设计等 | `素材` |

| [藏标网](http://logonc.com/) | 藏标网提供在线logo设计欣赏、标志图片素材、公司商标设计、国外标志设计欣赏、字体设计大全、企业吉祥物设计、校徽设计含义分享的标志网站，为logo设计师和设计爱好者提供一个寻找标识设计寓意的灵感平台，从分享logo设计图片素材过程中进步提高。 | `设计`、`logo` |

| [阿里矢量图](http://www.iconfont.cn/) | 阿里妈妈UED开发的图标库 | `阿里`、`图标` |



## 在线工具



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [TinyURL](https://tinyurl.com/) | 可以将网址转换成tinyurl.com域名的短链 | `短链`、`短网址` |

| [哇咔工具]](https://www.wakatool.com/maker) | 在线表情包制作器，功能强大，操作简单，素材丰富 | `表情制作` |

| [Dunnnk]](http://dunnnk.com) | 生成一些在一些设备上产品展示图片，只要上传自己的图片就可以，目前支持iOS相关设备和安卓手机 | `产品展示`、`图片生成` |

| [比特虫]](http://www.bitbug.net/) | 生成图标ico | `ico生成` |

| [压缩图](https://www.yasuotu.com/buttonColor) | 在线图片（照片、图标）去底色工具，可以将纯色图片背景色免费去除 | `去底色`、`图片压缩`、`格式转换`、`图片操作` |

| [Whimsical](https://whimsical.com/) | 在线画协作流程图、线框图、便签和思维导图 | `流程图`、`思维导图` |

| [t.cn短网址生成器](http://qvni.cn/t.cn/) | 可以将网址转换成t.cn域名的短链 | `短链`、`短网址`、`t.cn` |

| [cloudconvert](https://cloudconvert.com/mkv-to-mp4) | 在线转换视频文件至 MP4 格式，免费并且不需要注册 | `视频转换`、`MP4` |

| [My Brand New Logo](https://mybrandnewlogo.com/logo-maker) | 在30秒内创建一个Logo，可用于各种用途 | `Logo` |

| [小鸡词典](https://jikipedia.com/) | 查网络流行语，就上小鸡词典。小鸡词典专注于网络流行语的收录和解释，以最快的速度在全网捕捉当下的网络热词。以简单明了，清晰易懂的形式，向用户介绍网络流行语的含义、来历、传播过程和引申义。用户不仅能够通过小鸡词典了解网络用语，还能接触到小众黑话、新梗热梗、弹幕用语、方言俚语等不同的流行文化，以及网友们自主创造的旧词新解等。 | `流行语`、`梗` |

| [10分钟邮箱](https://10minutemail.com/10MinuteMail/index.html?dswid=5142) | 访问网页即可获得一个临时邮箱，页面广告较多。 | `临时邮箱` |

| [99PDF](http://www.99pdf.com/) | 在线批量压缩PDF | `压缩PDF` |

| [ASCII Generator](http://www.network-science.de/ascii/) | 根据你输入的英文单词，生成相应的字符图形 | `字符图形` |

| [ATOOL在线工具](http://www.atool.org) | 由华中科技大学一位在校女研究生开发的在线工具集合网站，旨在做出最简单方便、最完整干净、最全面完整的工具网站 | `工具集合` |

| [AYNU音乐实验室](http://mu.aynu.top/) | 免费的在线音乐播放器。收录全网最新无损音乐，提供无损MP3音乐免费下载，免开VIP尽享全网音乐免费播放下载！ | `音乐` |

| [AZW3在线转换](http://www.zamzar.com/convert/azw3-to-epub/) | 将azw3文件转换成其他格式文件 | `azw3`、`转换` |

| [Brandmark](http://brandmark.io/) | 免费生成logo，可通过关键词限定范围 | `logo` |

| [Cacoo](https://cacoo.com/) | 在线画图软件，可以创建和共享流程图、线框图、UML模型、网络图等。 | `流程图` |

| [Canva](https://www.canva.com/) | 利用 Canva 的拖放功能和布局，可以设计、分享和打印名片、徽标、演示文稿及更多内容。 | `设计`、`分享` |

| [ClipConverter.cc](https://www.clipconverter.cc/) | 单个Youtube视频下载，支持多种格式、多种清晰度。 | `Youtube` |

| [Convertio](https://convertio.co/zh/) | Convertio – 在线转换文件的简单工具。支持超过284种不同的文档、图像、电子表格、电子书、文档、演示文稿、音频和视频格式。 | `转换文件` |

| [Degraeve](https://www.degraeve.com/img2txt.php) | 根据图片生成相应的字符图形 | `字符图形` |

| [Devhints](https://devhints.io/) | 常用速查表，快速查询各类框架和库的常用方法，很实用 | `速查` |

| [Diagram](https://webdemo.myscript.com/views/diagram/index.html#/edit) | 手绘图，然后保存成 PPT 的在线服务。 | `手绘`、`PPT` |

| [Draw.io](https://www.draw.io/) | 在线云绘图制作平台，可以快速、自由的创建简单的图表，流程图、网页模版构架图、框架图等等 | `流程图` |

| [Editor.Pho.to](http://editor.pho.to/zh/edit/) | Editor.Pho.to 是一款拥有照片即时编辑工具的在线照片编辑器。添加文本和标签，应用滤镜和特效。裁剪、旋转、调整大小和调整图片。 | `照片编辑`、`滤镜` |

| [ezyZip](http://www.ezyzip.com/cn.html) | 在线压缩文件。无需安装或上传/下载。在浏览器中运行 | `压缩文件` |

| [favicon.cc](http://www.favicon.cc/) | 这是一个可以将用户的图片转换为ico图片的网站。将图片制作成ico图标并导出。 | `ico` |

| [FIGMA](https://www.figma.com) | 一款界面设计协作神器，图形设计功能强大、支持多人在线编辑与多人实时评论，用于开会或者研讨非常方便，也可以随意保存历史版本，简直堪称设计界的Google Docs。支持导出jpg、png、svg等多种格式。 | `设计`、`协同` |

| [FreeSSL.org](https://freessl.cn/) | 一个申请免费HTTPS证书的网站 | `免费证书`、`HTTPS` |

| [html5在线画板](http://hotu.co/hua/) | 一个通过html5就可以进行绘画的在线画板 | `HTML5`、`在线画板` |

| [LinkFox](https://linkfox.io/) | 免费的短链服务，可以将长链接转换为短链 | `短链` |

| [https://www.studyjava.cn/douyin](https://www.studyjava.cn/douyin) | 支持抖音、快手、微视等视频无水印下载 | `无水印` |

| [IcoMoon](https://icomoon.io/) | 提供了一系列矢量图标，还提供了一个用于制作iconfont的工具，直接导入SVG即可 | `图标` |

| [iH5](http://www.ih5.cn) | 移动页面制作工作，制作教程非常方便，功能强大到让你不可思议——物理碰撞、时间轴动画、滑动时间轴、地理定位、数据库、720°全景…统统都有，而且使用上永久免费。 | `HTML5` |

| [ImageOptim](https://imageoptim.com/) | 一个免费的应用程序，使图像加载速度更快，占用更少的磁盘空间，而不牺牲质量。提供Mac App以及Api，同时还是开源的。 | `图片`、`Mac` |

| [LightPDF](https://lightpdf.com/zh/) | LightPDF提供在线免费转换、分割、合并、编辑PDF文件服务及PDF相关解决方案。 | `PDF` |

| [logaster](https://www.logaster.com/) | 在线生成logo，你只需要提供网站名称和网站类型 | `logo` |

| [LogoMakr](https://logomakr.com/) | 在线设计logo，可以插入不同形状的图形和文字 | `logo` |

| [MP4ToGif](https://coldday.github.io/mp4ToGif/) | 视频转Gif，可以在线添加文字和编辑 | `视频`、`Gif` |

| [MySSL](https://myssl.com/) | 检测网站的SSL证书是否安全，是否存在漏洞，是否达到SSL行业标准，符合苹果ATS规范，能否通过微信小程序安全要求。同时提供证书格式转换，CSR，证书链，SSL配置生成等工具。 | `SSL` |

| [NameBeta](https://namebeta.com/) | 共收录 1578 种顶级域名，汇集互联网上 27 家知名域名注册商，每日更新价格信息 | `域名` |

| [Nicetool](http://www.nicetool.net/) | 好工具网致力于收集和打造各种简单易用的在线工具，目前已有500多个工具。 | `工具集合` |

| [Office Converter](https://cn.office-converter.com/) | 免费在线文件转换器( office-converter.com)，是最佳在线文件转换器。你能免费在线转换视频,在线转换音频,在线转换图形,在线转换文档和压缩。在线转换文件，包括PDF，Word，Excel，PowerPoint，OpenOffice，Flash，HTML，MP4，MP3，AVI，MKV，FLV，MOV，SWF，iPhone，Microsoft Xbox，WMV，WMA，OGG，JPG，BMP，TIFF，PNG，GIF，EPUB，ZIP，RAR等多种格式 | `文件转换` |

| [openGPS.cn](https://www.opengps.cn/Data/IP/LocHighAcc.aspx) | 根据IP定位地理位置 | `IP`、`地理位置` |

| [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) | 测试网站速度，优化性能，同时还会给出很具体的建议，很强大实用 | `性能` |

| [Paletton](http://paletton.com/) | 一个用于创建颜色组合的设计工具，使用色轮来创造伟大的调色板 | `设计`、`颜色组合` |

| [PDF在线管理工具](https://www.ilovepdf.com/zh_cn) | 完全免费的PDF文件在线管理工具，其功能包括：合并PDF文件、拆分PDF文件、压缩PDF文件、Office文件转换为PDF文件、PDF文件转换为JPG图片、JPG图片转换为PDF文件。无需安装。 | `PDF` |

| [photomosh](https://photomosh.com/) | 可以制作电视电脑屏幕坏了 / 你手机屏幕碎了的效果，它提供了27种故障特效，支持JPG / GIF / MP4三种格式的导出。 | `故障特效` |

| [picdiet](https://www.picdiet.com/) | Picdiet是一款用JavaScript编写而成的图片压缩神器，所有压缩过程都在浏览器中进行，尺寸、数量、大小均无限制，完全免费，缺点是只能压缩jpg格式的图片 | `图片压缩`、`JPG` |

| [Placeit](https://placeit.net/) | 提供了各种设计P图模板，每个演示用的模板上都附有标准尺寸，你也可以先在PS等软件处理好尺寸再上传，立即生成各种手拿iPhone、iMac，开着Macbook的图片，来演示你设计的静态图效果。 | `设计`、`图片` |

| [ProcessOn](https://www.processon.com/) | 免费在线作图，同时支持实时协作 | `作图`、`协作` |

| [Screen Sizes](http://screensiz.es/) | 展示了各种机型的尺寸、像素密度和像素比 | `机型`、`像素` |

| [SM.MS](https://sm.ms/) | 支持多张照片上传，单文件限制 5M 以内。支持 UBB 代码，上传后点 BBCode 即可。 | `图片上传` |

| [Smallpdf](https://smallpdf.com/) | 非常厉害的一个网站，PDF压缩，PDF转PPT，Word，Excel等等都可以直接通过这个网站实现 | `PDF` |

| [Squoosh](https://squoosh.app/) | GoogleCreativeLab出品的在线压缩图片工具 | `Google`、`压缩图片` |

| [thumborize.me](http://thumborize.me/) | Thumbor是一个智能图片处理服务，可以提供图片裁切、缩放、旋转等服务，wiki地址：https://thumbor.readthedocs.io/en/latest/index.html | `图片处理` |

| [Tineye](https://www.tineye.com/) | Search by image and find where that image appears online | `图片来源` |

| [tinyPNG](https://tinypng.com/) | 在线压缩jpg或png格式的图片，最大5MB，最多20张 | `图片压缩` |

| [Torrentz2](https://torrentz2.eu/) | 种子搜索器 | `种子搜索` |

| [transfonter](https://transfonter.org/) | 该工具将任何TTF、OTF、WOFF、WOFF2或SVG字体转换成CSS字体格式，并有CSS和SVG格式类型文件。 | `字体转换` |

| [uiGradients](https://uigradients.com/) | 汇集了一些好看的渐变，可以直接下载图片和CSS，同时还支持旋转、导入等功能 | `渐变` |

| [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/) | 一个强大的PS图象处理软件类CSS渐变编辑器 | `图像处理`、`渐变` |

| [Unsplash Source](https://source.unsplash.com/) | 一个简单的API，用于嵌入来自Unsplash的高分辨率照片。 | `照片`、`Unsplash` |

| [WebPagetest](https://www.webpagetest.org/) | 网站性能在线检测工具，同时会给出详细的优化建议。 | `性能检测` |

| [Whimsical](https://whimsical.co/) | 可视化协作！用流程图制作流程图，用线框设计用户界面，用便签运行项目。 | `流程图`、`协作`、`可视化` |

| [Yandex Image Translate](https://translate.yandex.com/ocr) | 俄罗斯搜索引擎 Yandex 的图片 OCR 服务，可以将图片里面的文字翻译成另一种文字。 | `OCR`、`文字识别` |

| [yEd](https://www.yworks.com/products/yed) | 在线绘制流程图 | `流程图` |

| [Yellow Lab Tools](https://yellowlab.tools/) | Yellow Lab Tools 偏向于一个发现不良实践的工具，会综合页面权重、请求数、DOM、错误的 Javascript、错误的 CSS 等方面取得一个评分。并显示出在加载页面的过程中，DOM 是如何相互影响。 | `Web`、`性能分析` |

| [Youtube Multi Downloader](https://youtubemultidownloader.net/playlists.html) | 免费的Youtube视频下载器 | `Youtube` |

| [万箭齐发](https://wangyasai.github.io/Stars-Emmision/) | 可以一键生成各种射线发射的效果，可以调整各种参数，包括方向、速度、射线大小等等，支持导出为PNG。 | `发射效果` |

| [代码高亮化](https://kn007.net/code-highlight.html) | 只支持html、css、js、xml、php这几种语言的高亮化 | `高亮` |

| [全球电视直播](http://bddn.cn/zb.htm) | 一个功能非常强大的电视直播网站，真的是十分良心；它支持几百个电视直播的网站，几乎拥有一般电视直播网站拥有的所有频道，它还支持港澳台卫视，国外电视等等。 | `电视直播` |

| [印记中文](https://docschina.org/) | 深入挖掘国外前端新领域，为中国 Web 前端开发人员提供优质文档！ | `文档` |

| [压缩图](https://www.yasuotu.com/) | 这个网站功能比较多，支持图片压缩、在线图片加水印、图片旋转、制作长图拼接、图片改颜色、图片添加文字、图片去底色、证件照换底色、转换格式、图片加边框、制作一寸、两寸证件照等 | `图片处理` |

| [图好快](http://www.tuhaokuai.com/) | 在线压缩图片，并且支持添加水印和图片格式转换 | `图片压缩`、`格式转换` |

| [图片体素化生成器](https://pissang.github.io/voxelize-image/) | 你只需要拖拽一张图片，它就会自动把图片转换成立体的体素效果，还提供超多参数配置。 | `体素效果` |

| [在线Less编译](http://tool.oschina.net/less) | 在线编译less | `编译`、`Less` |

| [在线文本比较](http://www.jq22.com/textDifference) | 可以在线比较文本以及代码 | `文本比较` |

| [在线正则匹配验证](http://regexr.com/) | 顾名思义，可以在线进行正则匹配的验证，支持手动输入正则匹配表达式以及需要验证的文本 | `正则验证` |

| [声享](https://ppt.baomitu.com/) | 声享 – 在线制作PPT平台, 让您可以随时随地制作、分享和录制PPT | `制作PPT` |

| [天牛表白网](http://www.tianox.com/) | HTML5表白网页在线生成 | `表白` |

| [婚礼Pic](http://www.hunlipic.com/love/) | 最浪漫的表白网页在线生成网站 | `表白` |

| [常用API文档索引](http://tool.oschina.net/apidocs) | 有好多API文档的索引，包括apache、android、bootstrap等等 | `API文档` |

| [幕布](https://mubu.com/) | 幕布是一款结合了大纲笔记和思维导图的头脑管理工具，帮你用更高效的方式和更清晰的结构来记录笔记、管理任务、制定计划甚至是组织头脑风暴。完整覆盖电脑端和移动端 | `笔记`、`头脑管理` |

| [微微二维码](http://www.wwei.cn/) | 微微二维码和小程序码在线生成器，可定制颜色、logo、背景图、前景图还有多种模板选择，录音语音、图文排版、趣味卡通、微博、微信、挥春、等彩色二维码制作，制作创意二维码无需学PS技术，轻松在线生成，十分适用于店铺商家使用 | `二维码`、`小程序码` |

| [思维趣文库](http://so.jutuit.com/zd/wenku/0/) | 免费下载百度文库文档，只不过暂时只支持doc格式的 | `百度文库` |

| [数安时代](https://certmall.trustauth.cn/Free) | 数安时代免费SSL证书支持单域名，适用于谷歌、火狐、IE、360等多种浏览器。 | `SSL证书` |

| [斗图啦](https://www.doutula.com/) | 斗图啦，收集了成千上万的撕逼斗图表情包，在这里你可以快速找到想要的表情，通过在线表情制作可以快速生成自定义表情。 | `表情` |

| [新榜编辑器](https://edit.newrank.cn/) | 新榜编辑器，丰富的样式和模板、海量的在线图片搜索，一键同步多平台，还有大量爆文供你参考。 | `编辑器` |

| [新浪短网址](http://dwz.wailian.work/) | 新浪短网址服务(Sina.lt)是互联网上最稳定、最安全、最快速的短网址服务，帮您把冗长的URL地址缩短成8个字符以内的短网址。 | `短链` |

| [智图](https://zhitu.isux.us/) | 腾讯ISUX前端团队开发的图片压缩工具。他与周边的tinypng压缩神器相比较，压缩效果和效率会相对优化。他可以转换为webp格式的图片（相比PNG和JPEG在不降低图片质量的同时，减少约三分之一的体积），可以控制图片输出质量，而且可以拖动设置条对比压缩前后的效果。 | `图片压缩` |

| [标你妹啊](http://www.biaonimeia.com) | UI自动标注工具，一键生成iOS、android、网页标注神器！提升设计师效率！ | `自动标注` |

| [求字体](http://www.qiuziti.com/) | 求字体网免费提供上传图片找字体、字体实时预览及字体下载服务，本网站可识别中文、英文、日韩、书法等多种类字体。只要上传图片或输入字体名称，就可以帮您找字体。 | `找字体` |

| [百度脑图](http://naotu.baidu.com/) | 类似ProcessOn，但是感觉功能会更多，有序号、进度指示灯功能 | `流程图` |

| [稿定抠图](https://www.gaoding.com/koutu) | 稿定设计是一款专为淘宝店主、新媒体运营人员和修图爱好者打造的免费在线抠图工具，无需进行复杂的操作，通过简单拖拽，就能完成产品抠图、淘宝抠图、证件照抠图换背景、抠商品图 | `抠图` |

| [草料二维码](http://cli.im/) | 生成二维码，可以是文本、网址、名片、小程序等等 | `二维码` |

| [装逼大全](https://www.zhuangbi.info/) | 快速搜索制作各种装逼表情。让开我要开始装逼了。 | `表情` |

| [装逼神器](http://deepba.com/) | 在线免费制作各种美女举牌照,id照,搞笑网络证件,搞笑表情在线制作,支付宝转账生成,装b神器,装逼神器,随风出品 | `图片`、`表情` |

| [音乐搜索器](https://shenzjd.com/shenzjd/music/) | 多站合一音乐搜索解决方案，可搜索试听网易云音乐、QQ音乐、酷狗音乐、酷我音乐、虾米音乐、百度音乐、一听音乐、咪咕音乐、荔枝FM、蜻蜓FM、喜马拉雅FM、全民K歌、5sing原创翻唱音乐。 | `音乐搜索` |

| [音乐直链搜索](https://music.liuzhijin.cn/) | 刘志进特制多站合一音乐搜索解决方案，可搜索试听网易云音乐、QQ音乐、酷狗音乐、酷我音乐、虾米音乐、百度音乐、一听音乐、咪咕音乐、荔枝FM、蜻蜓FM、喜马拉雅FM、全民K歌、5sing原创翻唱音乐。 | `音乐搜索` |

| [颜色分析工具](http://color3d.herokuapp.com/) | 上传图片后可以查看像素在LAB、RGB、HSL、HSV中的分布 | `颜色分析` |

| [颜色码转换](http://www.sioe.cn/yingyong/yanse-rgb-16/) | RGB颜色值与十六进制颜色码转换工具 | `颜色转换` |



## 在线简历



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [Enhancv](https://enhancv.com/) | 在线生成简历 | `简历生成` |

| [jerryonlyzrj的简历](http://jerryonlyzrj.com/resume/) |  | `简历` |

| [Lucy Bain](http://lucybain.com/) | 一个外国人制作的简历，网站风格不入我法眼 | `简历` |

| [Robby Leonardi](http://www.webhek.com/post/interactive-resume.html) | 超级酷炫的HTML5互动式程序员求职简历 | `求职`、`酷炫`、`互动` |

| [个人作品展示](http://hotu.co/cv/) | 这是一个很炫酷的展示个人作品的网站 | `炫酷`、`作品展示` |

| [叶俊星的简介](http://resume.jasinyip.com/) | 很简单的一个简历，但是内容已经足够了 | `简单` |

| [大牛的自我介绍](http://strml.net/) | 初看这个网站不会很吸引人，但它却是一个创意与技术的完美结合作品，一位前端程序员用很有趣的方式介绍了自己，同时也展现他娴熟的技术，不得不赞一下！ | `创意`、`打字` |

| [张邵鹏](http://szhangpitt.github.io/) | 相比其简历，我更喜欢他的个人主页 | `主页` |

| [张雯莉的简历](http://zhangwenli.com/cv/cn.html) | 可以切换中英文，提供下载功能，就是网站太慢了 | `下载` |

| [罗礼权的个人简历](http://cv.heeroluo.net/) | 简单却不平凡，突出了项目经历，值得推荐 | `简单` |

| [一个会动的简历](https://jirengu-inc.github.io/animating-resume/public/) | 一个很独特的简历，不过总感觉可远观而不可亵玩 | `独特` |



## 官方网站



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [chrome浏览器不同版本](https://commondatastorage.googleapis.com/chromium-browser-continuous/index.html) | 在这里可以找到各种系统的各版本chrome，chrome 1都有。。 | `chrome` |

| [htmlt5tricks](http://www.html5tricks.com/) | 可以在这个网站上找到很多关于HTML5的特效和教程 | `HTML5`、`特效`、`教程` |

| [Pattern Lab](http://patternlab.io/) | Pattern Lab帮助您和您的团队使用原子设计原则构建周到的、模式驱动的用户界面。 | `原子设计`、`模式驱动` |

| [php100](http://www.php100.com/) | php中文网-互联网开发者平台 | `PHP` |

| [stackoverflow](http://stackoverflow.com/) | 是一个与程序相关的IT技术问答网站。用户可以在网站免费提交问题，浏览问题，索引相关内容 | `技术问答` |

| [TrustAsia](https://www.trustasia.com/) | 亚洲诚信是赛门铁克亚太区官方唯一安全技术专家战略合作伙伴,500强企业首选.提供全球可信的SSL证书、HTTPS证书、EV SSL证书、代码签名证书、SSL数字证书等,SSL证书申请及SSL证书购买一站式服务 | `HTTPS`、`证书` |

| [W3C官网](http://www.w3school.com.cn/) | w3c的官网，内容比较全，有各种语言的入门教程 | `入门教程` |

| [w3c规范镜像版](http://yanhaijing.com/es5/#about) | w3c规范的镜像版，中文未校订，但是优化了阅读体验，可以很方便的查找规范 | `规范` |

| [Website Style Guide Resources](http://styleguides.io/) | 创建前端样式指南和模式库的协作资源集合 | `资源集合` |

| [xintheme](http://www.xintheme.com/) | 提供了多种wordpress主题 | `wordpress`、`主题` |

| [上线了](https://www.sxl.cn/) | 十分钟创建网站和小程序，无需专业技术知识与设计经验 | `网站`、`小程序` |

| [主题公园](http://www.themepark.com.cn/) | wordpress的各种主题，其中有免费的，也有付费的，可以在上面尝试几个，可能会有复合自己审美口味的 | `wordpress`、`主题` |

| [全栈课堂](https://www.quanzhanketang.com/) | 一个在线学习前端的网站，知识比较基础，适合新手 | `前端学习` |

| [前端开发仓库](http://code.ciaoca.com) | 前端总结网站，有一些手册和在线编辑功能，同时有一些比较实用的插件地址 | `手册`、`插件` |

| [北邮人导航](http://byr.wiki/) | 北邮人常用的导航页，随时随地 byr.wiki。一个框，全能搜！若打开缓慢，请访问简洁版 http://so.byr.wiki/ | `北邮人`、`网站导航` |

| [印记中文](https://docschina.org/) | 深入挖掘国外前端新领域，为中国 Web 前端开发人员提供优质文档！ | `文档` |

| [数码兽数据库](http://www.digimons.net/) | 非官方数码兽同好站点，但是内容很多，包括图鉴、玩具、游戏、漫画、动画等等 | `数码宝贝` |

| [漫威官网](https://www.marvel.com) | 漫威官方网站，你想知道的都在这里 | `漫威` |

| [菜鸟教程](http://www.runoob.com) | 感觉和w3c做的好像，不过好像界面会更优美一点，不过我没有看过上面的教程 | `教程` |

| [言叶之庭官网](http://www.kotonohanoniwa.jp/) | 电影《言叶之庭》官网 | `言叶之庭` |



## 数据分析工具



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [Foursquare](https://developer.foursquare.com/) | 位置服务，优点在于免费、功能强大 | `位置服务` |

| [Crazy egg热力图](http://www.crazyegg.com/) | 主要特点是对页面热点追踪分析的热力图，功能不错 | `热力图` |

| [数说立方](https://cube.datastory.com.cn/) | 本质上是一个BI产品，配备百亿级社交数据库，支持全网公开数据实时抓取，并搭载了分布式搜索、语义分析、数据可视化三大引擎系统的海量计算平台，实现数据处理“探索式分析”和“秒级响应”的两个核心功能。 | `数据分析` |

| [百度统计](http://tongji.baidu.com/) | 包括流量相关的网站统计、推广统计、移动统计三部分内容。分析内容包括趋势分析、来源分析、页面分析、访客分析、定制分析和优化分析。其中的页面点击热力图功能不错。 | `统计`、`热力图` |

| [谷歌分析](http://www.google.com/analytics/) | 包括流量分析工具、内容分析、社交分析、移动分析、转化分析、广告分析几部分内容 | `谷歌` |



## 炫酷特效



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [WebGL-Fluid-Simulation](https://paveldogreat.github.io/WebGL-Fluid-Simulation/) | 利用WebGL实现的鼠标滑动特效 | `WebGL` |

| [One Plus 7 Pro](https://www.oneplus.com/cn/7pro#/) | 一加手机的官网，从视觉效果上和交互特效上就给人眼前一亮的感觉 | `黑白插画`、`设计` |

| [Anita](https://www.anita-gelato.com/) | 本款美食类网站，整款设计采用了非常有趣的黑白插画设计风格，极赋视觉吸引力。加之，通过直观的黑白网格，更加直观集中的展示其产品和相关服务，用户体验也是极好。 | `黑白插画`、`设计` |

| [Bailey Coffee Screamers](https://www.baileyscreamers.com/) | 黑色背景，辅以高清彩色产品图片或视频，能够极大的强调和突出页面产品，提升产品销售量。而作为一款在线咖啡类产品售卖的网站，本网页，就在黑色背景上，展示了各种高清产品图片和视频，轻轻松松将让用户集中于所售卖的产品，从而效的提升用户购买的可能。 | `配色` |

| [Bugatti Divo](https://www.bugatti.com/divo/) | 该款汽车类网页设计，除了采用处处透着高档奢华之感的黑、白、蓝配色方案之外，最引人入胜的是其页面添加的交互式车道设计。用户简单滚动鼠标，跟随蜿蜒的车道，指尖轻点，即可了解产品（即各类车型）相关信息。此外，车辆信息，全屏视频展示，也更加生动直观，有趣而不失实用性，有效地降低了网站跳出率。 | `设计`、`配色`、`交互` |

| [Codrops2018](https://tympanus.net/codrops2018/) | 前端设计网站Codrops收集的一些2018年的酷炫特效demo和网站 | `酷炫`、`网站集合` |

| [Cool Backgrounds](https://coolbackgrounds.io/) | 提供了很多酷炫的背景图片，你可以将它们添加到博客，网站，或作为电脑和手机的壁纸。 | `背景图片` |

| [Kenta Toshikura](https://kentatoshikura.com/) | 这是个作品集展示网页，方方面面（包括背景图片，页面文案以及鼠标悬浮效果等等）都采用了极其简约的黑白配色，干净整洁。结合视觉滚动差设计，让整个网页更加流畅而实用。 | `作品展示`、`交互`、`黑白配色`、`视觉` |

| [Kin Movie](https://kin.movie/) | 黑白配色中的黑，轻松即可让人联想到黑夜。而论提升页面视觉效果，与黑夜最搭的，无疑是五颜六色的灯光。而本款影视类网页的设计师深刻的认识到这一点，利用光束和光点，结合电影主题，打造出了极具视觉效果的科幻风设计。 | `视觉`、`科幻风` |

| [Skinfinity Cosmetics](https://skinfinity.hr/) | 本款化妆品类网页设计，通过不规则的字母排版，让整款设计低调而时尚。加之，黑白配色的应用，若隐若现背景图的点缀，使整个网页奢华而神秘。非常符合其所售卖产品——女性化妆品的特色。 | `字母排版`、`黑白配色` |

| [Studio Bjork](https://studiobjork.com/) | 本款在线工作室类网页设计，采用黑白配色风格的同时，选用了极具特色的横向滚动式设计，新颖实用。 | `黑白配色`、`横向滚动` |

| [TPMM](https://tpmm.ge/en/) | 在线摄影和多媒体博物馆的网页设计，采用黑白配色方案的同时，利用黑色背景下，白色光点更易于突出展示内容的特点。通过交互式设计方式，为用户提供了极具视觉效果的网页设计。用户滑动鼠标，光点即跟随变化，展开或隐藏界面导航。 | `黑白配色`、`交互` |

| [typora](https://typora.io/) | 一款markdown编辑器和阅读器 | `Markdown` |

| [UI Moverment](https://uimovement.com/) | 这是一个设计爱好者的聚集地，他们在这里分享和讨论最有趣和独特的UI设计。 | `设计`、`社区` |

| [智能社](http://www.zhinengshe.com/index.html) | 智能社就是前端开发培训，北京最具深度和口碑的JavaScript、HTML5培训，专注于让学员获得快乐的学习体验并找到高薪工作的培训——数百名毕业学员高薪就职大型互联网公司，推出的《智能社JavaScript视频教程》更被大家誉为——最经典的JavaScript视频教程。 | `培训`、`教程` |

| [萨龙网络](https://salongweb.com/) | 专注WordPress高端主题设计与开发，为您提供一个现代、干净的WEB站点！ | `wordpress`、`主题` |



## 社区



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [樱花动漫](http://www.yhdm.tv/) | 樱花动漫拥有上万集高清晰画质的在线动漫，观看完全免费、无须注册、高速播放、更新及时的专业在线樱花动漫站，我们致力为所有动漫迷们提供最好看的动漫。 | `动漫` |

| [BD影视](https://www.bdys.co/) | 主要提供丰富的影视资源下载,并且可以在线云播预览,上映之后三个月内发布枪版,三个月之后发布蓝光高清下载 | `电影资源` |

| [Cheatography](https://www.cheatography.com/) | 这个网站上有超过4000份对照表，包括Linux、MySQL、Vim等等 | `对照表` |

| [CSDN](http://blog.csdn.net/web/index.html) | 已经没落的CSDN，好文章越来越少了感觉 | `CSDN`、`文章` |

| [Fandom](http://fandom.wikia.com/) | 这是国外知名的粉丝文化社区，你能在上面找到几乎所有领域的粉丝群，无论是游戏，电影，电视剧还是漫画 | `粉丝文化` |

| [GAMECORES](https://www.g-cores.com/) | 机核网，国内首个综合性的游戏（以各大主机游戏为主）、游戏周边的网络广播站点及论坛，并为广大游戏玩家提供最新最及时的声讯、视讯以及现场报道。 | `游戏`、`资讯` |

| [Github](https://github.com/) | 最好的项目管理工具，程序猿必备技能 | `项目管理` |

| [Greasy Fork](https://greasyfork.org/zh-CN) | 这里是一个提供用户脚本的网站 | `用户脚本` |

| [jQuery插件库](http://www.jq22.com/) | 致力于收集jQuery插件和提供各种jQuery特效的详细使用方法，提供在线预览，jQuery插件下载及教程。 | `jQuery`、`插件`、`特效` |

| [Marvel Spoiler Official](http://marvelspoileroficial.blogspot.com/) | 这是一个历史悠久的漫威粉丝网站，专门出品各种以假乱真的“官方海报/壁纸”，全部都是粉丝自发制作的，免费下载。 | `漫威`、`粉丝` |

| [SegmentFault](https://segmentfault.com/) | 仍然很活跃的社区，帖子很多 | `社区`、`问答` |

| [伯乐在线](http://web.jobbole.com/) | 微信公众号“前端大全”经常引用这里的文章 | `文章` |

| [前端乱炖](http://www.html-js.com/) | 前端乱炖，这里是最专业的前端知识平台，汇集国内大部分前端开发人员的前端花名册，最精彩的原创文章专栏，最专业的问答平台，最火热的话题频道，最丰富的线下线上活动。 | `前端花名册`、`问答` |

| [前端网](http://www.qdfuns.com/) | 原来是W3Cfuns，现在变成了QDfuns，而且好多广告 | `前端` |

| [博客园](http://www.cnblogs.com/) | 开发者的网上家园，原创文章还是蛮多的 | `原创文章` |

| [吾爱破解](https://www.52pojie.cn/) | 吾爱破解论坛致力于软件安全与病毒分析的前沿，丰富的技术版块交相辉映，由无数热衷于软件加密解密及反病毒爱好者共同维护 | `破解` |

| [开源中国](http://www.oschina.net/) | 不太喜欢他的排版和网站风格 | `开源` |

| [捷径社区](https://sharecuts.cn/) | 捷径社区，专注于发现和分享 Siri 捷径，让人们通过捷径探索 iOS 更大的世界。 | `捷径`、`iOS` |

| [游戏时光](https://www.vgtime.com/) | 专业、严谨、有趣，游戏时光致力于分享游戏乐趣，为玩家们提供快速准确的新闻资讯、全面的资料和友好开放的交流平台。 | `游戏` |

| [爱主题](https://www.iztwp.com/) | 免费WordPress主题、WordPress模板及WordPress插件分享下载，致力于为国内站长提供方便快捷的wordpress建站服务体验，爱主题所收集的wordpress主题涵盖范围广，包括：WordPress企业主题、CMS主题、图片主题、博客主题等，同时我们也提供自己的原创wordpress企业主题模板出售，给您更多选择。 | `wordpress`、`主题` |

| [站酷](https://www.zcool.com.cn/) | 中国设计师互动平台。深耕设计领域十二年，站酷聚集了650万设计师、摄影师、插画师、艺术家、创意人，设计创意群体中具有较高的影响力与号召力。 | `设计` |

| [设计达人](http://www.shejidaren.com/) | 精选全球优秀UI设计和网页设计欣赏，分享免费高质量设计素材，为设计师提供新鲜的技术教程和创意灵感，探讨交互设计、产品设计、用户体验以及xhtml+css教程。 | `设计`、`素材`、`创意` |



## 素材下载



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [Rebrickable](https://rebrickable.com/) | 关于乐高的一切在这里都可以找到，还有一些免费/付费的 Moc 图纸 | `乐高`、`LEGO`、`Moc`、`积木`、`图纸` |

| [CineMasterPieces](http://cinemasterpieces.com/) | 海报不少，而且像素都很高，不过购买的话会比较贵 | `海报` |

| [稿定设计](https://www.gaoding.com/) | 在线快速图片和视频编辑，不会PS也能搞定设计。海报、简历、PPT、公众号配图、电商等海量模板快速出图。三秒抠图实用便捷，抖音快手热门视频轻松搞定。 | `抠图`、`图片编辑`、`模板` |

| [奇遇网络](https://www.qiyuwg.com/) | 奇遇网络专业提供seo优化服务，seo优化外包，免费建站模板，免费wordpress模板，DIV+CSS模板,几千种免费网页模板，收集最好最全的html5模板及css3模板,html5是目前最前瞻的网页技术,本站为大家提供免费技术交流平台。 | `模板`、`源码`、`网页` |

| [17素材](http://www.17sucai.com/) | 各种各样的素材和源码 | `素材`、`源码` |

| [6m5m](http://www.6m5m.com/) | 游戏素材资源平台 | `游戏素材`、`资源` |

| [Cupcake](http://cupcake.nilssonlee.se/) | 所有图片你都可以复制、修改和分发，即使是为了商业目的 | `图片` |

| [design deck](http://designdeck.co.uk/) | 很多素材，包括图片、模板以及图标等等 | `图片`、`图标` |

| [Desktoppr](https://www.desktoppr.co/) | 提供不同分辨率的好看的壁纸 | `壁纸` |

| [dribbble](https://dribbble.com/) | 是一个全球优秀设计师聚集的地方，可以从上面发现很多Web设计的灵感和创意 | `设计`、`创意` |

| [Epic Spinners](http://epic-spinners.epicmax.co/#/) | 一个好看的css loading 代码库 | `loading` |

| [Font Space](https://www.fontspace.com) | 共有37000款英文字体供免费下载和使用，搜索avengers还有复仇者联盟中的字体，整整49款。 | `字体` |

| [Google Font](https://fonts.google.com/) | 谷歌字体，可以很方便的引用 | `Google`、`字体` |

| [Gratisography](https://gratisography.com/) | 世界上最奇特的免费高分辨率图片集合，包括世界上最好，最有创意的照片，完全免费。 | `图片`、`高分辨率`、`创意` |

| [Hloom](https://www.hloom.com/) | 提供Microsoft Word, Microsoft Excel, PDF, Google Docs的模板 | `模板` |

| [HTML5 UP](https://html5up.net/) | 响应式的HTML5和CSS3站点模板 | `响应式`、`站点模板` |

| [jQuery插件库](http://www.jq22.com/) | 致力于收集jQuery插件和提供各种jQuery特效的详细使用方法，提供在线预览，jQuery插件下载及教程。 | `jQuery`、`插件`、`教程` |

| [kiss png](https://www.kisspng.com/) | 这是个免抠素材库，共有将近640万张png格式的矢量图，不限次数下载。 | `矢量图` |

| [KOPPT](http://www.koppt.cn/) | 一个做PPT的神器，提供PPT模板、简历、图表下载，同时提供图表、背景图等资源的下载 | `PPT` |

| [Lifeofpix](https://www.lifeofpix.com/) | 摄影级别的图片，像素非常高，支持搜索和免费下载 | `图片`、`摄影` |

| [MAGAZINELIB](http://magazinelib.com/) | 可以免费下载很多种杂志，不过大多是英文的 | `杂志` |

| [Open Game Art](https://opengameart.org/) | 这里提供游戏相关的素材免费下载，包括图片、音频、动画等，大部分都是网友自愿上传的。 | `游戏` |

| [OPEN LOGOS](http://openlogos.org/) | 作者设计了一些logo，你可以进行申请，社区将决定哪个开源社会获得此logo | `logo` |

| [PEXELS](https://www.pexels.com/) | 免费高清图片，你可以任意使用 | `高清图片` |

| [Picjumbo](https://picjumbo.com/) | 网站收录的图片多以暖色为主，完全免费 | `图片` |

| [Pixabay](https://pixabay.com/) | 1.4 百万张图片和视频，这是一个充满活力的创意社区 | `图片`、`视频` |

| [StockSnap.io](https://stocksnap.io/) | 免费图片库，每周增加数百张高分辨率图像。 | `高分辨率`、`图片` |

| [Streetwill](http://streetwill.co/) | 免费高清大图 | `图片` |

| [unDraw](https://undraw.co/) | 不断更新各种免费的SVG素材，可以免费下载 | `SVG` |

| [Vue.js Examples](https://vuejsexamples.com/) | 收集了很多用Vue.js实现的好的例子 | `Vue`、`demo` |

| [像素网页](http://pixweb.authing.cn/#/) | 提供很多免费的响应式网站模板下载 | `响应式`、`网站模板` |

| [创客贴](https://www.chuangkit.com/) | 极简的平面设计工具，有很多设计类模板，包括PPT、海报等 | `设计`、`PPT`、`海报` |

| [别样网](https://www.ssyer.com/) | 高质量无版权图片遵循 CC0 协议，来自全球的内容社区，随时随地发布与使用 | `图片` |

| [千图网](http://www.58pic.com/) | 专注免费设计素材网站 | `设计素材` |

| [周读](http://www.ireadweek.com/index.php/) | 提供免费电子书下载、分享。包括mobi、epud、pdf、txt格式，kindle电子书下载 | `电子书` |

| [开创者素材](http://www.kaicz.com/) | 开创者素材专注于网站模板的建设与解决方案，提供最好的网站模板！免费为站长提供JS代码、HTML整站模板、CMS开源程序等代码下载功能和站长工具查询服务 | `网站模板` |

| [微信小程序开发资源精选网址导航](http://www.yimijili.com/xcxwzdh.html) | 集中了小程序开发资源，包括专业工具、参考文档和开发教程等等 | `小程序` |

| [懒人之家](http://www.lanrenzhijia.com/) | 可能是JS网页特效代码收集最全的懒站 | `网页特效` |

| [有字库](https://www.youziku.com/) | 全球第一中文web font（在线字体）服务平台，专为网页设计师提供在线字体 | `在线字体` |

| [求字体](http://www.qiuziti.com/) | 求字体网免费提供上传图片找字体、字体实时预览及字体下载服务，本网站可识别中文、英文、日韩、书法等多种类字体。只要上传图片或输入字体名称，就可以帮您找字体。 | `找字体` |

| [演界网](http://www.yanj.cn/) | PPT模板，PPT图表，PPT作品，PPT动画，keynote模板，图片素材 | `PPT`、`keynote` |

| [炫光生成器](http://codepen.io/tsuhre/full/BYbjyg) | CodePen炫光生成器，可以利用它生成各种各样的炫彩背景。点击鼠标就随机生成一张图就可以了，最后右键保存图片即可。 | `炫彩背景` |

| [站长素材](http://sc.chinaz.com/) | 很老的一个素材网站，但是内容还是很多的 | `素材` |

| [觅元素](http://www.51yuansu.com/) | 觅元素,设计元素的免费下载网站,提供位图、透明背景素材、高清png、图片素材、漂浮元素、装饰元素、标签元素、字体元素、图标元素等免抠设计元素的免费下载. | `设计素材` |

| [飞屋设计](https://www.ifeiwu.com/) | 飞屋是一个以简约轻盈风格为方向的网页设计工作室，为你提供Web端的创意视觉多平台解决方案。 | `简约`、`网页设计` |



## 视频学习



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [rails365编程学院](https://www.rails365.net/) | rails365编程学院是一家学习 web 全栈式开发等技术，分享高质量的 web 编程技术文章和视频教程的网站 | `编程`、`教程` |

| [好多视频网](http://www.haoduoshipin.com/) | 很多类型的视频，同时还有文字讲解 | `视频` |

| [妙味课堂](http://www.miaov.com/) | 网站设计的很精美,各种CSS和JS动画让你不会厌倦,就算不看视频看看他的网站设计思路也会获益匪浅. | `动画` |

| [慕课网](http://www.imooc.com/) | 更加有针对性地解决一些问题，而且还可以下载源码，是首推的视频学习网站 | `视频学习`、`源码` |

| [技术胖博客](http://jspang.com/) | 技术胖-胜洪宇关注web前端技术-前端免费视频第一博客，里面有很多免费的视频教程。 | `免费视频` |

| [极客学院](http://www.jikexueyuan.com/) | 对于小白来说更加亲切，学习进阶路线更加清晰，但是大部分需要会员，北邮人bt上有会员资源。 | `视频学习` |

| [汇智网](http://www.hubwiz.com/) | 用互动的方式，学习最前沿的技术 | `互动` |

| [计蒜客](https://www.jisuanke.com/) | 不知道这个名字是什么鬼。。但是从目的出发的理念很不错 | `视频学习` |



## 配色方案



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [Color Supply](https://colorsupplyyy.com/app) | 使用颜色控制盘选择喜欢的样式，然后就可以得到对应的颜色代码 | `配色` |

| [Color Hunt](http://www.colorhunt.co/) | 如你所见，这个网站提供很简单直观的配色方案，这些配色方案并不是一成不变的，也不是由计算机生成的，而是用户不断提交的，网站只是负责展示，你可以对喜欢的配色点赞。很有特点的是网站对这些配色方案进行了一些非常有用的分类。按照最新、最热、最受欢迎、随机。这样你就可以轻松选出时下最流行的配色。 | `配色` |

| [Color Schema Design](http://www.peise.net/tools/web/) | 这个网站提供了六种配色模式：单色、互补色、三角形搭配、矩形搭配、类似色搭配、类似色搭配互补色。同时还提供对比度调节，饱和度/明度调节等参数调节，最厉害的是可以直接预览应用配色后的网站的样子，很直观高效。而且网站提供的仪表盘操作也很有专业的感觉。对于那些有想法，喜欢自己动手实现的童鞋来讲是在合适不过了。 | `配色搭配` |

| [ColorDrop](https://colordrop.io/) | 这纯粹是一个懒人网站。网站提供了437种扁平化的配色方案，对！就是437种！我数过。如果你不怕挑花眼的话通过这个网站你可以轻松的获取你想要的配色的RGB值与HEX（十六进制形式）值。 | `扁平化` |

| [ColorFavs](http://www.colorfavs.com/) | 可以通过你上传的图片或者网络的图片来分析图片的配色构成。并且你可以查看别人的分析结果。对于借助图片来配色的情况可谓是很有帮助的，能省下不少的功夫。 | `配色分析` |

| [Colours](http://webcolourdata.com/) | 如果你想分析一个网站的配色，这个工具就很适合你。你只需要把你想要分析的网站的链接丢进这个网站他便可帮你快速高效的分析出网站的配色方案。而且分析的结果会有三种不同的图示来表示，很靠谱很专业。如果你想模仿一个网站的配色，这个工具是一个不错的选择。 | `网站配色分析` |

| [coolHue](https://webkul.github.io/coolhue/) | 这个渐变色网站我在之前的文章中推荐过。非常轻量的渐变色网站。网站提供了60种常用的渐变色，你不仅可以从网站获取渐变色的值你还能直接获得制作好的渐变色的图片，直接拿来做背景实在是再合适不过了。 | `背景图片` |

| [COOLORS](https://coolors.co/app) | 提供很强大的配色方案，也支持上传图片进行取色。另外还可以随机推荐配色方案，你可以拖拽调换颜色位置，调出相近色阶列表，调整整体方案的色调、饱和度、亮度、冷暖度。 | `图片取色` |

| [Duotone](https://duotone.shapefactory.co/) | 这个神器能让你一键无痛生成酷炫的双色画风，图片素材都是来源于大名鼎鼎的免费可商用图库 Unsplash | `双色` |

| [flatuicolors](http://flatuicolors.com/) | 一个提供配色方案和助攻前端UI设计的素材网站 | `素材` |

| [itmeo](https://webgradients.com/) | 提供了多达180种渐变色配色方案，同时提供渐变值与渐变图片，用来作渐变配色再合适不过了。 | `渐变图片` |

| [Material palette](https://www.materialpalette.com) | 谷歌开发的自动颜色搭配网站，勾选两个主颜色，自动生成色阶相近、协调度高的配色列表。 | `Google`、`自动生成` |

| [中国传统色](http://zhongguose.com/) | 这个网站很多人都知道，主要以中国传统色为主。主要提供一些很经典的传统色，比如胭脂色、朱砂色、鸭蛋青等，而且是根据中科院的一些资料制作的，所以这的颜色都是很正点的，用在与古风相关的设计中最合适不过了。 | `传统色` |

| [色轮](http://dwz.cn/gome002) | 这是由Adobe出的一款配色工具，提供七种配色规则。虽然界面上操作很简单，但是对于颜色的调节上功能一点都不差。非常靠谱。同时除了支持常见的RGB值、HEX值还支持CMYK值、LAB值、HSB值。可谓非常专业。 | `配色工具` |

| [配色表](http://tool.c7sky.com/webcolor/) | 正如这个网页的名字一样：配色表。这是一个很普通的配色表。这个配色表最大的特色是对颜色按照所给人的印象进行了分类：比如优雅、稳重、自然等。这使得在某些场合下使用这个配色表更加贴切与实用。 | `配色表` |



## 静态资源库



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [BootCDN](http://www.bootcdn.cn/) |  | `CDN` |

| [cdnjs](https://cdnjs.com/) | 很简单的页面，但是资源很多，就是搜索的时候简直太慢了 | `资源` |

| [百度静态资源共享库](http://cdn.code.baidu.com/) |  | `百度` |



## 音效素材库



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [100AUDIO](https://100audio.com) | 100audio是一支体验和操作都非常优质的音效素材网站，但是因为定位是商业网站，所以说，网站上的所有音源都是需要付费获得的，但是这里的音源基本都是正版，可以让你免去版权纷争。 | `音效` |

| [ADOBE](https://offers.adobe.com/en/na/audition/offers/audition_dlc.html) | 这是ADOBE官方提供的免费音源素材，音效素材总体量在20G左右，提供免费下载和使用，是非常好的内容了，可千万别错过！ | `Adobe` |

| [FREESFX](http://www.freesfx.co.uk) | 音源质量较高，该网站提供免费素材。 | `音效素材` |

| [freesound](http://freesound.org) | FreeSound实际是一个社区，该网站是一个协作型的团队合作式音频发布站点，世界各地的用户可以在该网站分享和上传音效内容，你可以在该网站找到非常多的音效，而且很多音效是可以直接在项目中使用的。 | `协作` |

| [pond5](https://www.pond5.com) | pond5是一个综合素材网站，提供照片、插画、音乐、音效、AE模版和3D模式、视频等资源，该网站的音效素材也非常丰富，其素材也分为免费和付费内容，当然，这些内容都是有版权保证的。 | `照片`、`插画`、`音效`、`模板` |

| [sound-effects-library](http://www.sound-effects-library.com) | 同行推荐的专业门户，可自行研究 | `门户` |

| [videohive](https://videohive.net) | videohive也是一个综合性较高的素材门户，当然除了音效，还有很多特效素材的提供，该门户分为国际版和国内版，而国际版的内容素材量优质，种类也比较丰富，所有素材都需要支付费用。但是该网站的素材确实质量较高，有非常多的声画效果值得参考。 | `声画效果` |

| [声音网](http://www.shengyin.com) |  |  |

| [爱给网](http://www.2gei.com) |  |  |

| [音效网](http://www.yinxiao.com) |  |  |



## Hover特效



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [2018 Make Me Pulse](http://2018.makemepulse.com/) | 用canvas绘制了2018这四个数字，特效很赞 | `canvas`、`2018` |

| [Alinti](http://preview.themeforest.net/item/alinti-minimal-creative-wordpress-portfolio/full_screen_preview/17753077) | 利用高清黑白照片或背景图片，简化黑白网页设计，简约式WordPress黑白网页设计典范 | `黑白` |

| [animatable](http://leaverou.github.io/animatable/) | 一个CSS属性，两个值，就可以产生各种不一般的特效 | `CSS` |

| [Ant Design Pro](https://motion.ant.design/) | Ant Design Pro正式发布了，其官方网站的交互效果很赞。 | `Antd` |

| [GAMECORES](https://www.g-cores.com/) | 机核网，国内首个综合性的游戏（以各大主机游戏为主）、游戏周边的网络广播站点及论坛，并为广大游戏玩家提供最新最及时的声讯、视讯以及现场报道。 | `游戏` |

| [Vue Conf](https://vue.w3ctech.com/#about) | 演讲嘉宾那里的Hover特效很别致 |  |

| [叶赫先生](https://www.yeehee.cn/) | 有很多Wordpress、小程序相关的文章，同时网站特效很不错 |  |

| [逍遥运](https://idc.yygzs.cn/) | 云服务器提供商，网站上有大量的hover效果 |  |

| [里米先生](https://blog.limiabc.com/) | wordpress主题，设计师的个人博客，简约大方，创意十足 | `简约` |



## Wordpress



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [M主题](http://mzhuti.com/) | M主题小程序站为您提供精品Wordpress小程序模板下载,帮助更多Wordpress站长使用小程序。 | `小程序`、`Wordpress`、`模板` |

| [Alinti](http://preview.themeforest.net/item/alinti-minimal-creative-wordpress-portfolio/full_screen_preview/17753077) | 利用高清黑白照片或背景图片，简化黑白网页设计，简约式WordPress黑白网页设计典范 | `黑白`、`简约` |

| [famethemes](https://www.famethemes.com/) | 提供了一些设计优雅、干净、漂亮的WordPress主题，包括免费和付费的 | `主题` |

| [ShieldsIO](https://shields.io/) | 提供了很多用于Github、Wordpress的徽章，拥有多种定制化功能 | `徽章` |

| [萨龙网络](https://salongweb.com/) | 专注WordPress高端主题设计与开发，为您提供一个现代、干净的WEB站点！ | `主题` |

| [里米先生](https://blog.limiabc.com/) | wordpress主题，设计师的个人博客，简约大方，创意十足 | `主题`、`简约` |



## 值得收藏



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [全历史](https://www.allhistory.com/) | 全历史(Allhistory）以AI知识图谱为核心引擎，通过高度时空化、关联化数据的方式构造及展现数字人文内容，尤其是历史知识。让用户沉浸在纵横开阔、左图右史的（历史、人文、社科等）知识海洋中。 | `知识图谱`、`历史知识` |

| [@bosslogic](https://www.instagram.com/bosslogic/) | 这是一位大神，你在网上看到的 90% 的漫威非官方海报都可能出自他手 | `漫威海报` |

| [AYNU音乐实验室](http://mu.aynu.top/) | 免费的在线音乐播放器。收录全网最新无损音乐，提供无损MP3音乐免费下载，免开VIP尽享全网音乐免费播放下载！ | `音乐播放器`、`音乐下载` |

| [BD影视](https://www.bdys.co/) | 主要提供丰富的影视资源下载，并且可以在线云播预览，上映之后三个月内发布枪版，三个月之后发布蓝光高清下载 | `影视资源下载` |

| [BTtwo](http://v.apkgm.top/) | 有很多电影和电视剧，同时提供在线观看 | `电影`、`电视剧`、`在线观看` |

| [Cheatography](https://www.cheatography.com/) | 这个网站上有超过4000份对照表，包括Linux、MySQL、Vim等等 | `对照表` |

| [Hello Github](https://hellogithub.com/) | 分享 GitHub 上入门级、有趣的开源项目 | `Github`、`开源项目` |

| [linkfox](http://linkFox.io) | 免费的短链服务，可以将长链接转换为短链 | `短链` |

| [jQuery插件库](http://www.jq22.com/) | 致力于收集jQuery插件和提供各种jQuery特效的详细使用方法，提供在线预览，jQuery插件下载及教程。 | `jQuery` |

| [Neets](https://neets.cc/) | Nneets是你的追剧管家，你可以把目前追的各种影视、综艺等记录下来，做追剧清单，更新永不落。它不生产观看渠道，只是各种观看来源的搬运工，并且一般都会有好几个观看源供君选择，还加上了有无广告、是否在线播放等标签。 | `追剧管家` |

| [Nicetool](http://www.nicetool.net/) | 好工具网致力于收集和打造各种简单易用的在线工具，目前已有500多个工具。 | `在线工具` |

| [typora](https://typora.io/) | 一款markdown编辑器和阅读器 | `Markdown编辑器` |

| [临时邮箱](http://24mail.chacuo.net/) | 临时邮箱是一款帮助我们解决某些网站需要使用到我们自己的真实邮箱，但是我们又不想暴露我们的邮箱的工具。 | `临时邮箱` |

| [仿知网](https://www.cn-ki.net/) | 这个网站的论文检索结果和知网的搜索结果基本一样，而且这个网站每个账号前期免费提供论文下载，当你的下载次数没了，你完全可以用其它邮箱再注册其它账号使用；当然，如果你不想再注册账号，这个网站提供一块钱随意下载论文一天，也是非常值得尝试。 | `知网`、`论文下载` |

| [吾爱破解](https://www.52pojie.cn/) | 吾爱破解论坛致力于软件安全与病毒分析的前沿，丰富的技术版块交相辉映，由无数热衷于软件加密解密及反病毒爱好者共同维护 | `软件破解` |

| [周读](http://www.ireadweek.com/index.php/) | 提供免费电子书下载、分享。包括mobi、epud、pdf、txt格式，kindle电子书下载 | `电子书下载` |

| [电影首发站](http://www.dysfz.vip/) | 国内最优秀的高清电影下载网站，每天更新迅雷中英双字电影百度云盘下载，搜集和分享高清中英双字电影百度云盘下载站，致力于构建最大的高清电影下载汇聚地，迅雷电影下载、免费电影下载尽在电影首发站高清电影下载站。 | `电影下载` |

| [美剧社](http://www.meijushe.cc/) | 这里有最新最全的美剧资源和电影资源，同时支持在线播放 | `美剧`、`电影` |

| [音乐搜索器](https://shenzjd.com/shenzjd/music/) | 多站合一音乐搜索解决方案，可搜索试听网易云音乐、QQ音乐、酷狗音乐、酷我音乐、虾米音乐、百度音乐、一听音乐、咪咕音乐、荔枝FM、蜻蜓FM、喜马拉雅FM、全民K歌、5sing原创翻唱音乐。 | `音乐搜索` |



## 电子书



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [bookset](https://bookset.me/) | bookset精品电子书免费下载，分享的免费电子书格式有mobi，epub，azw3等格式，并根据豆瓣评分排序，提供的电子书均为精品，有得到，喜马拉雅，微信读书，知乎等推荐书籍 | `电子书` |

| [雅书](https://yabook.org/) | 雅书电子书下载站，提供最新PDF电子书图书免费下载，以PDF为主的PDF电子书免费下载供学习使用。 | `电子书`、`PDF` |

| [好多书](http://booksk.com/) | 专业的电子书下载网站,epub,azw3,mobi,pdf,txt格式下载,小说文学,经济管理,传记,政治军事,历史、心理、教材辅助、外语学习等中英文电子书下载。 | `电子书` |

| [PDF转MOBI](https://pdf2mobi.com/zh/) | 通过此PDF转至MOBI格式的转换软件，您可以将PDF文档转换成Kindle设备适用的MOBI文档。 | `MOBI`、`Kindle`、`格式转换` |

| [书伴](https://bookfere.com/) | 网站页面简洁，无广告。书伴还有一个最大的特色是【推送服务】，注册账号后，定期会自动接收到最新期刊的更新。书伴电子书资源不是很多，但是更新速度快 | `推送`、`电子书` |

| [书格](https://shuge.org/) | 书格是一个自由开放的在线古籍图书馆，致力于开放式分享、介绍、推荐有价值的古籍善本，并鼓励将文化艺术作品数字化归档。 | `古籍图书馆` |

| [开源书籍](https://hellogithub.com/periodical/category/开源书籍/?page=1) | GitHub 上开源、有趣的开源书籍 – 适合新手入门的开源书籍 | `Github`、`开源书籍`、`入门` |

| [知轩藏书](http://www.zxcs.me/) | 专注精校小说，网站同样没有多余的广告。 | `精校小说` |

| [西林街](https://www.xilinjie.com/) | 西林街不仅仅可以搜索电子书，可以通过自定义搜索设置，搜索【网盘】、【视频】、【Mooc】等。另外，还可以搜索相应的学术搜索，为科研人员带来了方便之处。 | `电子书`、`学术`、`网盘` |

| [鸠摩搜书](https://www.jiumodiary.com/) | 鸠摩搜书，是国内一款强大的电子书搜索引擎，涵盖大部分电子书资源，界面简洁，无广告骚扰。另外无需注册、就可以直接下载国内外电子书，部分书籍还有在线朗读版。 | `电子书`、`在线朗读` |



## 网站导航



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [优设导航](http://hao.uisdc.com/) | 优设网站导航为设计师提供ps教程、UI设计、素材下载、高清图库、配色方案、用户体验、网页设计等全方位设计师网站导航指引。每周更新及时，是优秀设计联盟（SDC）旗下最实用、最专业、最全面、最好用的设计师导航！ | `设计师` |

| [千山](http://qianshan.co/) | 千山是一个简洁的网址导航。没有广告、弹窗和冗余信息，千山希望成为通向未知的最短路径。快捷键直达站点、一键打开多个标签页，千山愿为你节省每分每秒。 | `网址导航` |

| [博客志](http://www.jetli.com.cn/) | 建站于2006年，专注于收藏有价值的有效更新的优秀个人独立博客。 | `个人博客` |

| [咪咕鱼](http://www.miguyu.com) | 咪咕鱼，一个分享实用链接的网站，在这里你可以发现更多优秀有用的站点，收藏自己喜欢的链接。 | `实用链接` |

| [大数据导航](http://hao.199it.com/) | 大数据导航，以大数据产业为主，大数据工具为辅，给用户提供一个更加快速找到大数据相关的工具平台。 | `大数据工具` |

| [微信百宝箱](http://wxbbx.jh1z.com/) | 微信工作者的智库，收集了微信相关的工具，包括编辑器、二维码生成器和插件等等。 | `微信工具` |

| [微导航](http://www.we123.com/) | 最好的微信小程序大全，收录最全、分类最准确。是集微信小程序商店、微信小游戏，微信公众号平台，微官网，微网址为一体的微信大全，微信二维码大全。微信应用号，微信订阅号，微信服务号，三位一体完美结合。更有微头条，微商大全，微信精华一站全包括。 | `微信小程序` |

| [技术导航](https://www.daohangtx.com/) | 国内首屈一指的技术教程活动导航分类平台，站点已累计收录数千网站，累计为中国网民提供多达数亿的访问点击，满足用户随时查阅最全面最权威的文章资讯教程 | `技术教程` |

| [效率集](http://www.xiaolvji.com/) | 效率集是一个让你聚合互联网资源，分享互联网资源，且可以高度定制的导航网站。你可以自定义网址导航及主页搜索引擎，还自带在线记事，在线任务。通过效率集的聚合搜索，你可以购物比价，在线看电影，在线词典，在线翻译等。通过效率集，你还可以把自己收藏的网站分享给他人 | `互联网资源` |

| [泡面吧](http://www.paomianba.com/) | 泡面吧，在线教育导航品牌，服务在线教育行业创业者、投资人。促进交流，让大家可以像泡面一样了解在线教育的名站动态。 | `教育导航` |

| [炫猿](https://oo1.win/) | 电影、云、音乐、软件、浏览器插件、娱乐、学习等类型网站导航 | `网站` |

| [龙轩导航](http://ilxdh.com/) | 龙轩导航提供最快捷的资源平台，让你迅速找到想要的资源，准确又方便快捷 | `资源` |



## 资源下载



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [蓝奏云]](https://www.lanzous.com/b749444) | 收集了一些免费看视频的软件apk包 | `免费看视频` |

| [麦氪派](https://www.waitsun.com/) | 致力于分享优秀的Mac应用软件，介绍Mac的使用技巧，最有价值的Mac软件免费分享，提供最新Mac破解软件免费下载。 | `Mac软件`、`Mac应用` |

| [未来Mac下载](https://mac.orsoon.com/) | 有最好的mac软件下载和mac游戏下载 | `Mac软件`、`Mac游戏` |

| [Xclient](https://xclient.info/) | 精品MAC应用分享，每天分享大量mac软件，为您提供优质的mac软件，免费软件下载服务 | `Mac软件`、`免费应用` |

| [fastsoso](https://www.fastsoso.cn/) | 可以搜索网盘资源，虽然是付费下载，但是非常便宜，相当于只需要几分钱 | `网盘` |

| [云盘精灵](https://www.yunpanjingling.com/) | fastsoso -- 专注百度网盘搜索，百度云网盘搜索工具，你可以在这里搜索视频、音乐、图片、软件、文档、种子、专辑等资源，让百度云盘分享下载更方便、更快捷，比site:pan.baidu.com命令更好用。 | `网盘`、`电影`、`视频` |

| [CEIC](https://www.ceicdata.com/zh-hans) | 前所未有地覆盖全球超过195个国家和地区的经济数据（宏观经济、GDP、进出口、能源等）。CEIC帮助您一站式获取来自上千个数据源的百万级的时间序列数据，客服团队帮助您寻找或解释您想要的数据信息。 | `经济数据` |

| [6v电影网](http://www.6vhao.tv/) | 好看的电影、电视剧、综艺在线观看和下载，还可以查看观看榜单 | `电影`、`电视剧`、`综艺` |

| [Ant Design Landing](https://landing.ant.design/index-cn) | 平台拥有丰富的各类首页模板，下载模板代码包，即可快速使用，也可使用首页编辑器，快速搭建一个属于你的专属首页 | `首页模板` |

| [ClipConverter.cc](https://www.clipconverter.cc/) | 单个Youtube视频下载，支持多种格式、多种清晰度。 | `Youtube视频下载` |

| [down](http://www.jqhtml.com/down/) | 提供了一些计算机领域的书籍的免费下载，前端书籍居多。 | `书籍下载` |

| [无水印下载](https://www.studyjava.cn/douyin) | 支持抖音、快手、微视等视频无水印下载 | `无水印下载` |

| [iData](https://www.cn-ki.net/) | iData知识检索—免费下载学术文献，知网免费下载，全球最大的知网镜像。 | `学术文献` |

| [Sub HD](http://subhd.com/) | Sub HD为影视爱好者们提供交流字幕的平台，你可以在这里找到并下载字幕，对字幕打分和评论，也可以上传字幕与大家分享。 | `字幕` |

| [wallhaven.cc](https://alpha.wallhaven.cc/random) | 电脑壁纸下载 | `电脑壁纸` |

| [乔布简历](http://cv.qiaobutang.com/) | 乔布简历为广大大学生及应届毕业生提供各行业最新最全的中英文个人求职简历模板表格免费下载，以及大量关于简历写作技巧的文章，致力于帮助求职者打造最专业的简历。 | `简历模板`、`简历技巧` |

| [嗨文库](http://doc.hiwenku.com/) | 支持百度文库文档免券下载，支持word、PPT、excel等格式原文件下载。 | `百度文库` |

| [坑搜网](http://www.kengso.com/) | 坑搜网网盘搜索是专业的百度云搜索引擎，实时收录百度云、百度网盘等资源，每天更新各类高清电影、视频、种子、小说等网盘资源，真正你懂的网盘搜索神器！ | `百度云`、`网盘` |

| [天天美剧](http://www.ttmeiju.vip/) | 天天美剧(ttmeiju.vip)第一时间为您提供最火最新的高清美剧下载,高清美剧在线观看.天天美剧是一个非盈利性美剧爱好者组织，我们的宗旨是：分享快乐，打造国内最顶级的BT美剧片源分享平台 | `美剧` |

| [字幕库](https://www.zimuku.cn/) | 字幕下载 | `字幕` |

| [字幕组](http://www.zimuzu.tv/) | 字幕组网站是由爱好者成员成立的网站，继续为您翻译最新最快的海外影视剧字幕,美剧,日剧,电影最新字幕下载 | `字幕` |

| [电影首发站](http://www.dysfz.vip/) | 国内最优秀的高清电影下载网站，每天更新迅雷中英双字电影百度云盘下载，搜集和分享高清中英双字电影百度云盘下载站，致力于构建最大的高清电影下载汇聚地，迅雷电影下载、免费电影下载尽在电影首发站高清电影下载站。 | `电影下载`、`网盘` |

| [青苹果影院](https://www.qpg123.com/) | 青苹果影院是最新最全的电影网站，迅雷免费下载观看随时随地看电影大片，青苹果电影网专注于电影在线观看服务。 | `电影` |



## 边学边玩



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [Check iO](https://checkio.org/) | 一款需要你使用 Python 或 Javascript 来推进的页游 | `Python`、`Javascript` |

| [Code Monkey](https://www.playcodemonkey.com/) | 通过编写代码来抓住香蕉。主要用于教师教学生们学习编程。（付费的） | `付费学习` |

| [Codewars](https://www.codewars.com/) | 通过跟他人的实际挑战赛达到逐步掌握编程语言的目的。支持 JavaScript， Python， C#， Java， Python 等。 | `挑战赛` |

| [CodinGame](https://www.codingame.com/start) | 解决具有挑战性的编码问题，基本上支持所有编程语言。 | `编码问题` |

| [Cyber Dojo](http://www.cyber-dojo.org/) | 程序员练习编程的一个地方，支持 JavaScript， Java， Python， PHP， Ruby 等。 | `练习编程` |

| [Elevator Saga](http://play.elevatorsaga.com/) | 一款电梯升降式游戏，一步步解决问题，如在第一关中，你要在最多 60 秒内运输 15 人。 | `电梯游戏` |

| [Flexbox Defense](http://www.flexboxdefense.com/) | 使用Flexbox定位属性进行防御的塔防游戏 | `Flexbox` |

| [Flexbox Froggy](http://flexboxfroggy.com/) | 使用CSS相关属性帮青蛙渡河 | `CSS`、`青蛙渡河` |

| [Screeps](https://screeps.com/) | 通过玩游戏来学习 JavaScript。据称是全球第一个面向程序员的大型多人在线沙盒游戏。 | `在线沙盒游戏`、`Javascript` |

| [The Bezier Game](https://bezier.method.ac/) | 在The Bezier Game游戏中，首先以动画的方式来演示一遍贝塞尔曲线画法，然后自己尝试去绘制。要注册看演示的提示，比要按Shift或Alt按等。 | `贝塞尔曲线` |

| [Vim Adventures](https://vim-adventures.com/) | 在游戏中学习Vim | `Vim` |

| [XSS game](https://xss-game.appspot.com/) | 通过游戏的方式了解XSS的攻击方式以及如何防备 | `XSS` |

| [极客战记](https://codecombat.com/play) | 一个面向学生的通过把玩真正的游戏来学习计算机科学的平台。它是一个由上千玩家共同志愿维护的项目。支持 Java， JavaScript， Python， Lua， CoffeeScript。 | `游戏`、`计算机科学` |



## 程序员工具



| 站点名称              | 描述         |  标签             |

|----------------------|------------|-------------------|

| [Clippy](https://bennettfeely.com/clippy/) | CSS 中的 clip-path 可视化生成器 | `clip-path` |

| [Postwoman](https://postwoman.io/) | 请求生成器，可帮助您更快地创建请求，节省了宝贵的开发时间。 | `请求`、`Postman` |

| [Swagger](https://swagger.io/) | 在整个API生命周期的开发中，从设计和文档到测试和部署，都提供了相应的工具和解决方案 | `API`、`文档` |

| [bundlephobia](https://bundlephobia.com/) | 在线检测添加一个 NPM Package 所需要的成本，包括包体积及下载时间 | `NPM 包`、`包分析` |

| [AST explorer](https://www.wakatool.com/maker) | 在线浏览AST结果，支持多种语言 | `AST` |

| [Stackblitz]](https://stackblitz.com/) | 在线编辑，主要优势在于可以非常方便的选择所需框架 | `在线编辑` |

| [Express Route Tester](http://forbeslindesay.github.io/express-route-tester/) | 可以检测Express路由写法是否正确 | `express`、`路由检测`、`router` |

| [猴子都能懂的GIT入门](https://backlog.com/git-tutorial/cn/) | 超级简单的Git入门，有入门篇、高级篇和 Git 索引，内容很全 | `Git`、`教程` |

| [ASCIIFlow Infinity](http://asciiflow.com/) | 利用ASCII字符进行绘制，可以调整大小，自由绘制，可以绘制出类似于佛祖那样的代码。 | `ASCII`、`代码` |

| [autoprefixer](http://autoprefixer.github.io/) | 在线生成css兼容代码，其实就是autoprefixer的在线版。。 | `兼容`、`autoprefixer` |

| [BIOMES](https://demo.marpi.pl/biomes/) | 利用WebGL可以随机生成抽象的体素地形 | `WebGL`、`地形` |

| [Can I use](https://caniuse.com/) | 提供现代Web技术的浏览器支持情况查询 | `Web`、`兼容` |

| [Carbon](https://carbon.now.sh) | 生成类似 mac 风格的代码图片，用于分享 | `Mac`、`代码` |

| [Character Entity Reference Chart](https://dev.w3.org/html5/html-author/charref) | 各种符号的转义字符表 | `转义` |

| [Choose A License](https://choosealicense.com/) | 根据几个问题为你的开源协议的选择提供建议 | `协议` |

| [CODELF](https://unbug.github.io/codelf/) | 项目命名神器，可以通过关键词搜索github、gitlab等网站上的项目名称 | `命名` |

| [CSS Sprite Generator](https://spritegen.website-performance.org/) | 在线生成雪碧图和对应CSS的工具 | `雪碧图`、`Sprite` |

| [CSS Triangle Generator](http://apps.eky.hk/css-triangle-generator/zh-hant) | CSS三角形产生器 | `三角形` |

| [CSS Triggers](https://csstriggers.com/) | 列举了在不同浏览器引擎中，各种CSS属性对于重排和重绘的影响 | `重排`、`重绘` |

| [css-selectors-cheatsheet](https://frontend30.com/css-selectors-cheatsheet/) | 共十几道题，考察你对CSS选择器的掌握程度 | `CSS选择器` |

| [CSS动画曲线绘制](http://yisibl.github.io/cubic-bezier/#.17,.67,.83,.67) | 通过可视化的方式帮你生成CSS中的cubic-bezier函数参数 | `CSS动画`、`贝塞尔曲线`、`cubic-bezier` |

| [esprima Parser](http://esprima.org/demo/parse.html) | 输入JS语句可以立马生成我们所需的抽象语法树（AST） | `抽象语法树`、`AST` |

| [GitPunch](https://gitpunch.com/) | 会定制你想追踪的npm包库，还可以定时发邮件通知 | `NPM`、`邮件` |

| [nginxconfig.io](https://nginxconfig.io/) | 在线生成nginx配置文件，可以选择语言和功能，而且该站点是开源的。 | `nginx` |

| [No-Cruft Excel to HTML Table Converter](http://pressbin.com/tools/excel_to_html_table/index.html) | 可以从Excel电子表格（或HTML表格）粘贴数据，并将其转换为没有任何格式的新HTML表。 | `HTML`、`表格` |

| [PXtoEM](http://pxtoem.com/) | PX和EM单位转换器 | `单位转换` |

| [Regex101](https://regex101.com/) | 在线测试正则表达式 | `正则` |

| [SassMeister](https://www.sassmeister.com/) | Sass在线编译，就是网站做的有点少女。。 | `Sass`、`编译` |

| [ShieldsIO](https://shields.io/) | 提供了很多用于Github、Wordpress的徽章，拥有多种定制化功能 | `徽章` |

| [SSL Labs](https://www.ssllabs.com/ssltest/analyze.html) | 对SSL Web服务器进行深入分析，不过耗时较长 | `Web`、`服务器分析` |

| [SSL在线工具](http://www.ssleye.com/) | 支持15种对称加密算法在线校验、公私钥对的生成、PKCS1、PKCS8相互转换、CSR生成&查看、证书查看等等功能 | `SSL` |

| [TablesGenerator](http://www.tablesgenerator.com/) | 在线可视化生成LateX、Markdown、HTML表格 | `表格` |

| [Toolfk在线工具箱](https://www.toolfk.com/) | 一款程序员工具箱，包含几十个实用的工具。 | `工具集合` |

| [渐变层生成器](https://codepen.io/pissang/full/geajpX) | 直接用鼠标拖拽就可以调整渐变层的各种参数，然后可以导出为svg格式。 | `渐变` |

| [缓动函数速查表](https://easings.net/) | 形象地介绍了各种缓动函数，而且开源 | `缓动函数` |

| [美图前端动画库](http://f2er.meitu.com/animastore/) | 美图的前端团队制作的动画库，收集了一些简单实用的动画，可以直接复制代码 | `动画` |