2014年12月 存档

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

2014年12月28日,星期日

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

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

阅读全文…

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

2014年12月22日,星期一

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

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

阅读全文…

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

2014年12月22日,星期一

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

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

阅读全文…

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

2014年12月14日,星期日

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

阅读全文…

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

2014年12月7日,星期日

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

阅读全文…

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

2014年12月7日,星期日

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

阅读全文…

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

2014年12月2日,星期二

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

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

阅读全文…