whqet

数据节选自前端癖，欢迎Star、Watch。

好久没写了，今天闲逛发现一个网站，gongxiang

收集国内外知名网站的最新资源文章分享。

今天闲逛tutorialzine看到一个游戏-Guess the Programming Language，大家不妨测试一下，你对编程语言了解多少？

制作这个案例前，需要准备这些。1.掌握scss的使用，当然不用也可以，使用scss会比较高效。2.掌握利用css3的box-shadow、border、border-radius的实现绘图。3.掌握css3的动画方法。4.一些耐心、一些创意（创意可以让你更好）5.学会解析案例，先看静态图。

前面我们曾经用两篇文章《纯CSS3文字效果推荐》、《CSS3立体文字最佳实践》给大家介绍过利用CSS3 text-shaodwo实现阴影文字、立体文字效果，但是纯css3实现的方式也有局限性，比如大量应用时会延缓页面加载速度，效果的可控制性不强，今天给大家推荐一个js插件来弥补这些缺失，隆重推出shine.js。

昨天看到html5tricks上的一篇文章《jQuery鼠标滑过文字跳动动画插件》，止不住手痒用sass、css3实现下，并进行了扩展，希望能对大家有所帮助，主要利用sass@for指令、compass里的random随机数，给文字设置不同的动画状态，利用transition或animation实现动画。

在SASS官方文档的基础上，加上了自己的解读和相关优秀资源推荐，欢迎大家拍砖！点保存点成了发表，请大家见谅！继续写作中。

ladies and 乡亲们，坚守工作岗位的程序猿们，时间不止学习不辍的童鞋们，福音来了。语音识别高不高端、难不难？今天给大家推荐一个简单易用的js实现的语音识别框架annyang，然后用一个案例教教大家使用。

他山之石，可以攻玉，从别人的设计里汲取灵感，酷站集；交流创意，我秀我乐，开放分享获得成长，设计师交流社区……

node.js中文资料导航 转自https://github.com/youyudehexie/node123

寻找Github、微博、知乎等技术社区上比较活跃、影响力大的圈内大神，供大家膜拜！

2015年2月3日，CSS Counter Style level3成为了W3C的候选标准，是时候来一探究竟，看看强大魔力的@counter-style如何自定义list-style和counter。进来一坐，且听庆哥分解。

许多研究表明，探究式学习、游戏式学习是较为高效的学习方式，编程语言学习更是如此。正如看电影和玩游戏的区别，你在看电影的时候，你完全处于被动的、接受内容状态，而玩游戏则全然不同，你会和计算机有交互，通过自己亲手做完每一件事来收获乐趣和成就感。今天就给大家推荐两款AngularJS的交互学习教程，希望可以对大家有所帮助

大约一年前曾经通过两篇文章给大家推荐了几个前端游戏《玩游戏学前端——猜颜色、选择器》、《玩游戏学前端——颜色您了解多少？》，刚刚又给大家分享了《玩游戏学前端——钢笔工具边玩边学》，通过玩游戏来学东西真的轻松愉快，我们接着给大家分享两个游戏，看看您的细节把握能力如何？

引入大约一年前曾经通过两篇文章给大家推荐了几个前端游戏《玩游戏学前端——猜颜色、选择器》、《玩游戏学前端——颜色您了解多少？》，如果大家看到过定然会发现，通过玩游戏来学东西真的轻松愉快。今天我们继续给大家推荐一个游戏，让大家边学边玩钢笔工具。钢笔工具是PS里面一个用途广泛而又略微难学的工具，有多少同学可以非常有把握的说掌握了钢笔工具，来来来不妨一试！！ 游戏整个游戏分为两个部分，一个部分是教学部分

Awesome AngularJsA list of awesome AngularJs services, directives, utilities and resources.

《优快云 Markdown简明教程》课程在优快云学院上线，敬请品鉴，欢迎斧正！ 本文包括课程介绍、课程目标、课程目录、参考博文目录，同时希望您可以从课程内容、授课形式、教学风格、视频录制等等诸多方面给予博主帮助，期待您的回复！

一年一度的情人节，不少网站都进行了不错的装点，我们不妨来简单浏览一下，借以触发灵感。

前端开发规范系列文章之Javascript Tips and Tricks，本意是写成常用代码收集、常用技巧整理的文章，感觉“常用代码大全”太土、“实用代码整理”有失偏颇，“提示与技巧”不够稳重，所以使用常用的英语说法，相信广大程序员都懂得。

转载自财付通设计中心bboy90大作0《》

前期曾经给大家介绍过一个使用google font的mixin（详见《Google Fonts Sass Mixin》），今天我们再进一步给大家推荐个使用web font的mixin。

关于Font Icon的教程How to Use Icon Font?@font-face@font-face制作Web Icon Icon font 实践如何把你的图标转换成web字体Font Icon的资源30 Free Icon Font SetsAbsolutely Free Icon Fonts20 @fontface Icon S

作为一种优雅酷炫的页面展示的方式，视差滚动（Parallax Scrolling）正受到越来越多前端设计师的宠爱，优设的2014年网页设计趋势中依然能够看到它的影子，所以我们不得不来好好研究下视差滚动的原理和实现方式。

转载自站酷，原文链接http://www.zcool.com.cn/article/ZNjUzODg=.html#

OK，CSS3演武场今天继续，我们重点来看看css3 animation实现逐帧动画，额，按照惯例，看效果点这里，下载戳这里。实现原理a.外盒子div.cell，一个字的宽和高，超过不显示，确保只能显示一个字。b.内盒子div.num,一个字的宽，行高一个字高，我们通过这个盒子的移动实现动画。c.内盒子的移动动画的animation-timing-function使用step。d.倒计时结束，外盒子动画消失掉。

1.效果分析纯CSS3实现进度条的制作，效果如下图所示，详见----demo----2.难点分析圆角边框，内阴影，渐变填充实现斜纹效果斜纹动画3.实现步骤a.html架构 b.进度条母条.progressBar的实现.progressBar{ margin: 50px auto; padding: 5px;

好的，经过几天的悲哀与沉寂，每日一站这个网站欣赏栏目今天继续，博主发现这个栏目的文章既受人欢迎又容易导致误解，因此决定这个模块的文章不再推荐到首页，感兴趣的童鞋自行前来欣赏吧。好的言归正传，今天给大家推荐亚洲动物基金的一个终止动物虐待的网站，内容发人深省，设计打动人心，技术应用恰到好处。网站加载引导页，随着进度条的加载，网站的slogan也逐渐呈现，深灰色的配色令人倍感压抑（比较切

今天给大家推荐LESS的几个Mixin集，其中最著名的要数LESS Hat了，诚如其官方网站所言，“86个智能Mixin可以大大简化网页开发工作”。另外，LESS Elements、Twitter Bootstrap和Preboot几个也不错，都是可以选择的。笔者认为，LESS Hat提供的mixin最多，支持最广泛，建议大家使用。

本文由whqet翻译自WDL，21 Beautiful Examples of Using White in Web Design。前端开发whqet，关注前端开发技术 分享网页相关资源。White is certainly an elegant color, and when properly used in web design, it can deliver really beaut

<!--p {text-indent:2em; line-height:24px; font-size:14px}h1, img {margin:0.6em 0}h1 {font-size:16px; line-height:22px}-->本文由whqet翻译自WDL，18 Websites that Take Scrolling to t

网页技术飞速发展，前端从业者一个很重要、也是很有挑战性的工作就是紧跟时代，及时了解那些新技术、新工具、新趋势。每天要发表成千上万的blog或者技术文章，你能每一篇都看过吗？你能及时关注每一个牛人的新动向吗？

来自

今天给大家推荐两个适用于前端业者的游戏，大家来玩玩游戏，看看自己的水平如何。两个游戏，分别关于颜色和选择器，来一探究竟撒。

今天推荐一个鼠标悬停效果包，大家可以通过研读效果提高自己的水平，也可以直接用在自己的项目中。

low poly低多边形（类似于折纸的效果），多边形风格的设计应用越来越多，今天我们就来看一个利用d3.js写成的生成器。

之前曾经研究过几个纯css实现的文字效果，《CSS文字条纹阴影动画》和《响应式奶油立体字效果》等，今天我们来研究几款文字效果，主要利用text-shadow、webkit内核的几个独有特性实现效果。

今天在研究d3.js时，遇到一个颜色配对游戏，感觉特好玩，推荐给大家，大家可以玩玩看，测试下你对颜色了解多少。顺便科普下颜色理论。

今天我们看一个Sass实现颜色卡动画，继续学习sass的使用，效果见下图所示。在线研究点这里，下载收藏点这里。同时也请大家发表高见，迎接鼓励，欢迎拍砖。