2016年06月 存档

PNG格式小图标的CSS任意颜色赋色技术

2016年06月8日,星期三

CSS可以修改图片的颜色,没错,可以,本文就带你一睹真相,再次领略CSS的潜力和造诣。

阅读全文…

基于clip-path的任意元素的碎片拼接动效

2016年06月7日,星期二

看电影的时候会有特效,反派被攻击的粉碎,依然可以零零碎碎的拼接成完整体。在网页中,我们可以使用类似的效果,而且使用CSS3就可以,而且可以让任意的元素有这种效果。不信?你点击去看看就知道了~~

阅读全文…

JS一般般的网页重构可以使用Node.js做些什么

2016年06月7日,星期二

做前端的应该都听过Node.js,偏开发背景的童鞋应该都玩过。

对于一些没有计算机背景的,工作内容以静态页面呈现为主的前端,可能并未把玩过Node.js,且很有可能对Node.js都没有一个比较立体的认识——知道这玩意可以跑服务,构建很多前端工具,看上去很厉害的样子,但是,可能就仅限于此了。

实际上,就算你JS一般般,你也能搞出一些有意思,可以提高自己生产效果的小工具小脚本什么的,本文就将通过示例演示,玩Node.js,只要懂中文,会毛毛雨程度的JS就够了……

阅读全文…

基于用户行为的图片等资源预加载

2016年06月4日,星期六

懒加载和本文要提到的预加载实际是不同的概念。

典型的懒加载,例如本博文章的图片,当用户滚动图片进入窗体的时候,才去加载;或者用户点击选项卡,原本隐藏的图片此时再去加载,这个也称之为懒加载。

而预加载则是,用户还没有行为发生,资源已经加载完毕,从这一定义来讲,我们传统图片啪啪啪全部加载完毕,本质上也是预加载,好处就在于,体验好啊,没有泛白或者菊花的出现。不足也很明显,那就是资源可能白白加载了。

那有什么办法可以把懒加载的省资源省流量和预加载良好体验结合在一起呢?

阅读全文…

基于screen.width的伪响应式开发

2016年06月3日,星期五

传统的响应式实现往往基于基于media query查询,这是基于CSS的布局控制,因此,当我们缩小浏览器窗口,可以即时看到布局变化。但是,这种实现在我看来,除了让总监大人可以方便体验窄屏效果外,就然并卵了! 而反倒是有可能增加了额外的资源消耗和开发成本。
那有没有什么办法既能满足响应式的需求,同时我们开发这边不要那么烦心呢?
试试使用screen.width来做伪响应式开发……

阅读全文…

canvas图形绘制之星空、噪点与烟雾效果

2016年06月2日,星期四

本文的3个效果都是源自我最近做的几个真实的项目,是canvas领域基本入门的一些效果。代码我都专门重新梳理了下,必要注释也都加上去了,方便大家的学习……

阅读全文…