whqet

原创 SASS基础教程

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

原创 为什么写博客？

希望通过博客这个平台记录自己的学习进程，反思学习心得，提高自己，同时可以帮助到别人，善莫大焉！希望自己可以坚持，坚持走自己的路，坚持到底！

转载 界面设计之尺寸篇

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

原创 CreateJS奥运五环动画

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

原创 纯CSS实现倒计时动画

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

原创 可控制的CSS3D盒子动画

今天来看一个CSS 3D盒子动画，利用jqueryUI和jquery实现盒子动画的控制，在线看请戳这里，下载把玩请戳这里。

原创 纯CSS实现3D翻牌效果

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果，简易效果请大家狠戳这里在线体验，或下载收藏。

原创 纯CSS实现手风琴效果

今天来看一个使用hover触发的一个手风琴效果，鼠标hover时改变图像宽度，配合transition实现动画，效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。

原创 《月熊志》网站欣赏

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

原创 html5烟花绽放效果

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

翻译 SVG线画如何实现

本文翻译自CSS-TRICKS的站长CSS大牛CHRIS COYIER（同时也是Codepen的站长）的文章《How SVG Line Animation Works》，文章不逐字翻译，以意译为主。另外说一句，本博客发表的文章《SVG奥林匹克五环动画》用的也是这个原理，总是感觉说不清原理，同时学习下大牛的表达方式。

原创 纯CSS实现的Loading效果

纯CSS实现的Loading效果，CSS3试验场重点实验CSS3的动画属性。大家可以到我的codepen看看效果。

原创 “纯萌”网站欣赏

每日一站今天继续，这个主题每次都喜忧参半，一方面大家都很喜欢，能够让更多的人看到，给更多的人或许一点点帮助也能让博主乐呵半天；另一方面，因为推荐的网站很多都是商业网站，难以摆脱广告的嫌疑，先后两次被“首页退回”，很是郁闷。哎，废话不多，我们言归正传。今天这个网站来自宝岛台湾，一个动漫网站，使用背景滚动实现的动画效果，动漫风格的图片很萌、很靓。引导页的loading效果很纯、很萌，单一的背景

原创 纯CSS实现3D折纸效果

今天继续来看一个纯CSS实现的3D折纸效果，效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的，没有看过的童鞋欢迎移步。本效果原理如下图所示，分别用.img，.img:before和.img:after三个元素装载图像的50%，30%和20%三个部分，三个部分设置一样的背景图像，下面两个background-position属性实现背景偏移。

原创 纯CSS实现图像3D悬停效果

今天来看一个纯CSS实现的图像3D效果，用div.img装载图像的上半段，.img:fefore伪类来实现图像的下半段、呈现图像标题，用.img:after伪类实现图像的阴影。

原创 “大气”网站欣赏

在网页设计领域，国风一般出现在房地产、游戏、传统文化等网站中，这些房地产项目或是中式别墅，或是田园风格，游戏则一般是历史风格的游戏，传统文化元素诸如书画、玉石、戏剧等本身就为传统文化元素，因此这些应用皆属国风风格“形似”应用。而体现中国传统文化内涵，传统元素的神似应用却不多见，今天给大家介绍一个商业网站中的应用。

转载 八大创意理论应用

原创 前端工程师必备-网址篇（持续完善中）

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

原创 EaselJS简明教程2-动画

EaselJS简明教程系列第二部分，今天主要看看动画的实现，没有看过第一部分的可以看看教程1绘图。

原创 “年味”网站欣赏

话说，非诚勿扰经常会出来一些“奇葩”，首轮上来灯全灭，所以说第一印象很重要。对于网站来说你的第一印象产生于网站主页，主页的色调、版式能不能给人视觉冲击，能不能瞬间抓住浏览者的心，非常关键。

原创 “绝美画卷”网站欣赏

今天我们继续来看个国风的设计作品，大家可以到官网仔细体会（为避免广告之嫌，不再列出项目名称，大家见谅）。这是一个城市度假地产网站，所以整个网站以突出休闲、恬静为主题，同时展示其文化底蕴，从网站作品看，很好的达到了这个主题。尤其是导航设计方面，更是匠心独运。浏览网站，恰似绘制一幅度假胜地的绝美画卷，按下鼠标左键开始绘制画卷，底部标尺作为主导航也令人爽心悦目。好的，上图。网站引导页的定

原创 EaselJS简明教程1-绘图

EaselJS是CreateJS Suite中的一个js库，它可以让canvas的使用变得简单，它提供了一个直接了当的创建html5 canvas中使用富媒体、富交互应用的解决方案。为了便于大家学习，结合官方教程和官方DEMO我们来写一个简明教程，主要是对自己的学习做个梳理，也希望对大家有所帮助。

原创 “古今”网站欣赏

有句话说的很好，民族的才是世界的。中国文化在西方人眼里，充满神秘的色彩，充满探究的诱惑。我们为什么不坚持自己的风格呢？

原创 《十二生肖运程图》网站欣赏

今天开始，博客开辟一个新栏目，每天向大家推荐一个网站，从视觉设计、用户体验、前端技术等角度解读网站。

原创 纯CSS实现checkbox

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

原创 SVG新年火柴棍动画

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

原创 最好的 HTML5/CSS3 演示（PPT）框架

随着互联网与信息技术的发展，人际之间的资源分享、观点碰撞越来越频繁。PPT是一个很好的展示和交流的方式，但是在网络实时呈现方面，桌面端的PPT程序显得无能为力。因此，基于web的内容展示应用需求激增，在此背景下，基于html5+css3的演示框架日渐流行。今天，我们就来给大家推荐几个流行的项目。

原创 SVG奥林匹克五环动画

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

原创 通过开源文档学LESS系列3

通过开源文档学LESS系列1，我们通过一个经典的LESS Mixins集preboot，学习了LESS的基础知识，包括变量、注释、混合和混合的参数等。通过开源文档学LESS系列2，通过tRRtoolbelt.less的代码解读来学习LESS，主要讲解了LESS中的命名空间、作用域、多条件判断和类型判断函数、字符串插值和避免编译。本教程通过解读css effects项目源码来继续学习LESS。

原创 通过开源文档学LESS系列2

通过开源文档学LESS系列的第一部分，我们通过一个经典的LESS Mixins集preboot，学习了LESS的基础知识，包括变量、注释、混合和混合的参数等，详见通过开源文档学LESS系列1。我们继续第二部分，通过tRRtoolbelt.less的代码解读来学习LESS。tRRtoolbelt.less是由Trent Oswald开发的一个便用日常应用的LESS mixinis Collection。

原创 通过开源文档学LESS系列1

今天开始一个系列教程，通过一些国外开源LESS文档来学习LESS。这些开源http://的文档一般都是前端开发实际项目经验的总结，从中可以看出LESS的基本语法和日常使用，也可以从中管窥大牛开发者的智慧。

原创 CSS3 莲花盛开动画

See the Pen CSS3 Lotus by haiqing wang (@whqet) on CodePen.大家先来看看效果，纯CSS3实现，为了简化问题，使用LESS和prefix free。

原创 CSS文字条纹阴影动画

See the Pen shadow text by haiqing wang (@whqet) on CodePen./*Webkit Only，key code for the effect*/ .background-clip(text); -webkit-text-fill-color: transparent;

原创 canvas多彩条纹背景

See the Pen Canvas stripes by haiqing wang (@whqet) on CodePen.

原创 LESS Hat简单教程

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

原创 垂直居中对齐CSS代码

CSS垂直居中对齐，LESS简化书写。