Chrome absolute绝对定位display/visibility渲染bug

2015年01月10日 by 张 鑫旭 阅读 48096 次, 今日 1 次

一般我们对Chrome浏览器的评价是:Chrome好棒!Chrome好潮!Chrome就是多来A梦,要什么有什么!但是,再好的奶茶也会有过期的时候。很多次遇到,Chrome下的渲染表现是最糟糕的那个。比方说本文要介绍的两个bug就是Chrome浏览器下特有的,到底是什么bug呢?点击去瞅瞅就知道啦!

当然,除了bug展示,也提供了解决方案。有demo,有截图,有必要的源代码展示,总之希望本文的内容能够对您的学习有所帮助。

阅读全文…

再说CSS3 animation实现点点点loading动画

2014年12月28日 by 张 鑫旭 阅读 78216 次

以前介绍过一种方法实现打点loading动画效果,但是那个方法不健壮,机缘巧合,让我重新思考有没有更好的方法。而本文分享的就是自己想到了2个全新的实现方法,兼容各大小浏览器。

本文不仅有demo,源代码展示,还特意制作了多种gif效果演示帮助理解,相信本文的内容会对你的工作有所帮助的!

阅读全文…

CSS3 cursor属性值zoom-in/zoom-out,grab/grabbing实例

2014年12月22日 by 张 鑫旭 阅读 46606 次, 今日 1 次

CSS3的领域范围已经渗透到了cursor属性(鼠标手形)。这里简单介绍两个相当实用的组合zoom-in/zoom-out以及grab/grabbing.

本文重在展示,开阔眼界,一如既往,有demo,有截图,有必要的源代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS3/SVG clip-path路径剪裁遮罩属性简介

2014年12月22日 by 张 鑫旭 阅读 84737 次, 今日 3 次

CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类,还有很重要的一个分支:SVG属性家族!

所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置。本文的clip-path就是其中一个属性,可以游走于SVG属性和CSS属性之前。本文中等篇幅,中等难度,丰富的源代码展示,丰富的demo页面,丰富的截图,还有必要的gif演示,总之,希望本文的内容能够对您的学习有所帮助!

阅读全文…

SVG-Morpheus实现SVG图标图形间的补形动画

2014年12月14日 by 张 鑫旭 阅读 33304 次

如何实现矢量图形之间的过渡动画效果呢?可不可以像以前的flash那样,知道前后图形,直接创建中间的补间动画呢?有,当当当当,就是本文要介绍的SVG-Morpheus! 一如既往,有demo页面、有丰富的截图,有必要的源代码展示,不仅如此,本文还有swf效果展示, MP4视频效果展示以及gif截图效果。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip:CSS计数器+伪类实现数值动态计算与呈现

2014年12月7日 by 张 鑫旭 阅读 70125 次

内容如题,重在展示,以及开拓眼界,拓宽思路。与通常该调调的文章类似,有demo,有源代码展示,还有必要的截图。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

翻译:慢点更好-为何排序比速度更重要?

2014年12月7日 by 张 鑫旭 阅读 27914 次, 今日 14 次

我们平时都关注网页性能,或许还忽略了一个很重要的东西,元素的排序。很多时候,如何让页面元素以合适的排序呈现要比页面加载速度更重要。本译文的主要思想就是这个,欢迎围观。

阅读全文…

PSD小图标变身SVG Sprites/font-face历险记

2014年12月2日 by 张 鑫旭 阅读 53464 次

结语摘要:SVG是以后图形领域重要的媒介,如何导出适合开发的SVG图形是设计师必备技能,本文的填色等处理都是比较重要的处理细节;页面仔对图形软件使用不一定很熟,尤其illustrator,本文就拿一个比较复杂的图标举例,演示了如何迁移以及优化SVG路径。实际开发时候,一般的PSD中的小图标路径都是简单正常的,不需要“相减”或“联集”等路径操作。所以,弄清楚了本文的操作,基本上图标SVG变身都不是什么问题。

技术发展,以后肯定会出现PSD一键SVG转换工具的,本文内容就要作古了,或许现在就有,哪位小伙伴有所耳闻的,不妨分享下~~

阅读全文…

小小小tip: 按钮文字无缝变菊花

2014年11月30日 by 张 鑫旭 阅读 36757 次

如题,文字变菊花。没错,就是文字变菊花,具体什么内容,若有兴趣,自行点击去围观。很短的文章,分分钟就可以看完。

阅读全文…

mobilebone.js-mobile移动web APP单页切换骨架

2014年10月31日 by 张 鑫旭 阅读 262331 次, 今日 2 次


一分耕耘一分收获,终于赶在月底前把这篇文章发布了,扳一扳手指头,快40天去了,鲜有项目做这么长时间。来鹅厂目前最大的收获之一就是做产品的态度,一定要花足够的精力去精雕细琢,kill每一个痛点,完善每一个体验。虽然过程很辛苦,但是做出来的东西大家会都喜欢。看上去好像谁到知道,做产品要用心,但事非经过不知难,一定要亲历与感悟,才能真正成为自己所得之物。

虽然上面调侃多次“说不定回火”,但自己实际并没有真在意。我并不确定有多少人会使用mobilebone.js, 但是,唯一我确定的是,心有多大,舞台就有多大,如果没有制作精品的态度,没有完成世界top级作品的胸怀,没有用心的反复雕琢与实践,一定是不会火的,最多就是发布时候众人捧个场、鼓个掌,然后,就没有然后了,就像千千万万昙花一现的小企业一般。

自己花了很多功夫为mobilebone.js做了些国际化工作,例如,JS全英文,项目含英文介绍等。虽说冲出亚洲、走向世界这个目标目前还很远,但是,若没有此番心胸、想法以及切切实实的努力,那就只是梦,而不是梦想了!

阅读全文…