whqet

想象这样的场景： 您刚刚创建了一个**杰出的**响应式设计，然后准备在移动设备中测试一下。在您意想不到的地方产生了一些问题，文字乱糟糟的，动画波涛汹涌，表单没有呈现您设计的样式。然后花费N多时间修复这些问题，您可能抓狂地把电脑扔出窗外砸中邻居家的猫。

本博之前曾经写过两篇博文《纯css3文字效果推荐》、《css3立体文字最佳实践》得到了大家的广泛关注，今天我们更进一步，研究一下文字菜单上可以做哪些动画，15种效果会不会有您喜欢的，来来来，不妨进来坐坐。

系列博客《跟名站学前端》，希望对大家有所帮助，今天来看某百科网站的年度总结，交互体验超赞！

如果您是资深前端er，经验丰富、富有创意，也有可能面对新项目一时踌躇；如果您是前端初学者，可能胸中沟壑，无从下手。多多赏析优秀网站，开阔视野、寻求灵感、解析技术，很有必要。我们从国内外网页欣赏站(Awwwards\CSS Winner\Best CSS等)的收录作品中，选择一些有代表性的作品进行解析，欣赏、研读、提高，开始一个全新的系列博客《我跟名站学前端》，希望对大家有所帮助。今天来看台湾某餐饮品牌网站首页动画效果，希望对大家有所帮助。

据说handlebars是一个流行的模板引擎，可以把html从javascript中分离出来，写更清晰的代码。来不妨一试。

今天来看一个利用canvas+javascript实现的烟花绽放效果，大家可以到我的codepen看看DEMO，在线观看或是下载研究，悉听尊便。

Javascript的调试仍然是大多人的噩梦，有什么妙招吗，看看老外大牛如何说……

纯css实现的checkbox，效果见我的codepen。关键在于把原生的input隐藏，用和他相关的label来探测单击事件。再就是checkbox里的对勾的实现，用右边和下边的边框组合，然后旋转而成。

今天闲逛某JS前端培训网站，发现推出了最新的Javascript学习dagang

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

来继续看一个响应式表格，重点学习媒体查询，智能手机中将表头隐藏，利用:before伪对象伪造表头，效果见如下图所示。

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

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

文本居中，div居中，水平居中，垂直居中，两个方面11种解决方案总有一种适合您。

关于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

我们知道，好的编码规范、编程约定非常重要，但是文档架构呢?建立一个好的文档架构是开始一个网站或者APP的基础，我们如何建立一个结构清晰、便于维护的文档架构呢？我们的目标：1）需要一个多页面项目（网站或者APP）2）需要项目支持多屏幕尺寸，换句话说，需要实现响应式布局3）最终产品易维护4）最终产品性能良好5）未来项目可套用该模板

临近期末，大部分的基础教学内容已经讲解完毕，在进行比较大型的项目训练之前，如果能让学生了解甚至遵循一些前端开发的编码规范将会是一件非常有意义的事情。因此，本博客准备于近期整理一个编码规范于最佳实践的系列文章，包括html、css、javascript、jquery、php等，希望能对大家有所帮助。

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

ladies and 乡亲们，表单验证你在做吗？客户端or服务器端，javascript or jquery，动手写 or 使用插件，今天我们来探索下使用纯css实现表单验证，借以学习css selectors level 4中的表单相关的伪类选择器。

本系列教程以翻译Chris Smith的Angualr Basics为梗概，融合博主自己的理解，为大家提供一个简单明了的学习教程，通过讲解基础、实用的内容，简化学习进程、降低学习难度。本文为系列教程的第4篇，Angular控制器。...

Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现易读易写的文章写作，已经逐渐成为事实上的行业标准。CSDN博客支持Markdown可以让广大博友更加专注于博客内容，大赞。但是，不少博友可能对Markdown比较生疏，本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown，希望可以对大家有所帮助。本文为系列文章的第一篇，关于Markdown。

1.前言Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现易读易写的文章写作，已经逐渐成为事实上的行业标准。CSDN博客支持Markdown可以让广大博友更加专注于博客内容，大赞。但是，不少博友可能对Markdown比较生疏，本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown，希望可以对大家有所帮助。

1. 前言Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现易读易写的文章写作，已经逐渐成为事实上的行业标准。CSDN博客支持Markdown可以让广大博友更加专注于博客内容，大赞。但是，不少博友可能对Markdown比较生疏，本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown，希望可以对大家有所帮助。系列教程目录关于MarkdownMark

本文为《Markdown简明教程》系列教程的第4篇Markdown UML图，主要讲解Markdown序列图、流程图等, 顺便为介绍了无需任何插件的在线绘制UML的Gravizo。下一篇文章我们来研读CSDN Markdown的一些特性。

早上起来闲逛codops，在它的Web Design & Development News: Collective #149 | Codrops发现了来自百度的数据可视化工具Echarts，貌似功能强大，自己尝试着学习下，顺便给大家梳理Echarts案例教程系列文章，欢迎大家点赞拍砖！

作为一个CSS预处理器，Sass正受到越来越多的青睐，诸如Github、Codepen、CSS-Tricks、SitePoint、w3cplus等网站采用Sass组织、管理CSS文件，Sass正在逐渐成为事实上的CSS预处理器行业标准。接下来几篇文章，我们来研读下Sass中的关键功能，今天来看map，大家不妨一坐，精彩内容马上呈现。 map简介在Sass中，maps代表一种数据类型，可以包含若干键

ECharts案例教程系列文章，试图通过案例从入门到精通的方式学习数据可视化工具ECharts，第1篇我们通过简单的条形图、条形图和折线图的混搭两个案例描述ECharts的使用流程，数据配置框架等。本博文为第2篇，研究时间轴在数据图中的应用。

还在使用setInterval吗，你out了，requestAnimationFrame可以实现更为经济、更加准确的控制动画，今天来看看它的来龙去脉。

刚刚写了篇《CSS变量试玩儿》，我们了解到可以使用原生的CSS来定义使用变量，简化CSS书写、优化代码的组织与维护，但可怕的兼容性问题，又让我们望而却步、一笑了之。 但是有这么一个CSS变量currentColor，兼容良好、功能强大，接下来我们来一探究竟。简介CSS里已经有一个长期存在的兼容性良好的变量currentColor，表示对当前元素颜色的引用，可以应用在当前元素的其他属性和后代元素上。

CSS很美妙，能够为您的页面穿上衣裳，各种各样五彩斑斓的衣裳，但是对于开发者来说，它又不够灵动，于是乎有了各种各样的预处理器Sass、LESS、Stylus，这些预处理器可以很大程度的提高CSS的灵活性，增强CSS的代码组织与维护。但是毕竟不是亲生的，然后负责CSS开发的那些大牛们坐不住了，开始给CSS赋予一些新的特性，本文就来探讨下CSS变量的进展与应用。

如果您是资深前端er，经验丰富、富有创意，也有可能面对新项目一时踌躇；如果您是前端初学者，可能胸中沟壑，无从下手。因此，多多赏析优秀网站，开阔视野、寻求灵感、解析技术显得很有必要。我们从国内外网页欣赏站(Awwwards\CSS Winner\Best CSS等)的收录作品中，选择一些有代表性的作品进行解析，欣赏、研读、提高，开始一个全新的系列博客《我跟名站学前端》，希望对大家有所帮助。今天开篇立意，来看第一博，我跟名站学前端之Brian Hoff Design。

前端开发规范系列文章之html编码规范，感兴趣的同学请关注《前端开发规范》专栏。随着html5的逐渐深入人心，html5和xhtml截然相反的态度，造成了前端开发者的困惑，如何保持html代码的兼容性、简洁性、未来适用性，称为今天我们这篇文章的主要目的。参考一系列的html开发规范（mdo、github、doyoe、globant、LFeh等），从诸多规范中寻求共同点，试图寻找最佳解决方案。

好吧，来看一个html5的video元素的应用，实现简单控制。到这里观看效果，到这里在线研究，或者下载收藏, 视频加载可能有点慢，请耐心等等。

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

CSS Counter（CSS 计数）可以允许我们使用css对页面中的任意元素进行计数，实现类似于有序列表的功能，灵活使用CSS Counter可以让我们在进行文档排版、页面布局时事半功倍，好的，请大家摩摩拳擦擦掌，精彩内容马上呈现。

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

索契奥运会结束了，今天给大家看一个利用CreateJS实现的奥运五环动画，在线把玩请点这里，下载收藏请戳这里。

昨天晚上索契冬奥会开幕，开幕式上还出现了五环变四环的乌龙，哈哈。我们用SVG弄个五环动画加以弥补。

正在学习SVG，弄个2014年的火柴棍动画，大家先看效果。

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