whqet

在B站开始更新《前端开发轻松上手》系列视频，依据HTML、CSS、Javascript的路径，轻松上手前端开发，通过案例的方式巩固前端开发基础知识！敬请三连！详情请戳《前端开发轻松上手》！

今天是个好日子，2014年5月20日，表白的最佳时机，虽说孩子已经四岁、结婚已经五年，但是也不可以偷懒，于是有了这个效果，在线研究点这里，下载收藏点这里。程序猿and程序媛，大胆秀出你的爱吧。

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

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

今天早上闲逛的时候发现了《Trippeo》-一个管理商业旅行软件产品的官方网站，网站简洁而又大方，值得我们学习，我们重点研读它的文字遮罩链接效果。

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

HTML5 Page Visibility API是一个非常有用的特性，当页面对用户不可见时，暂停播放页面中的视频、动画、声音、以及其他耗费内存的操作，等用户回来时，再继续这些操作。当然，最好提醒下用户可以继续回到本页面上来，本文研究利用改变页面tab（title）实现提醒。

引言为了激发广大童鞋的学习积极性，让我们的学习更加贴近未来工作需求，便于记录学习过程、总结学习收获、广交朋友，我们在优快云上开通课程主页，希望大家可以通过优快云这样的学习平台，更好地提升自我。

最近关于Service Workers的研究与讨论日益增多，今天就给我大家梳理一些相关资源，让大家一睹为快！！

昨天我们学习了利用requestAnimationFrame优化动画控制，然后就忍不住冲动，在fork别人codepen的基础上，实现了这个炫彩logo粒子效果，效果预览如下。

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

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

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

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

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

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

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

看到google今天的女生节Doodle，自己用纯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;

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

一、why随着移动技术的迅速普及，越来越多的人通过不同设备来浏览网页，为了便于不同设备的用户访问，网页经常需要针对不同设备进行不同的设计，不但费时费力，而且不同界面容易造成用户体验的不一致。响应式web设计正是由此而生。图1-4可以充分说明响应式网页设计的必要性。图1.当前流行的网页浏览设备图2.网页运行于不同的操作系统图3.当前主流的屏幕尺寸对比