APNG历史、特性简介以及APNG制作演示

2014年09月19日 by 张 鑫旭 阅读 45454 次, 今日 99 次

APNG, 全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展,可以实现png格式的动态图片效果。努力成为动态图片标准,iOS8已经支持这一新技术。本文就讲介绍APNG的一些历史、特性以及如何制作等。希望能对大家的学习有所帮助。

阅读全文…

超级强大的SVG SMIL animation动画详解

2014年08月31日 by 张 鑫旭 阅读 223988 次, 今日 215 次

本文详细介绍SVG SMIL animation动画。前半部分主要是效果体验,后半部分只要是参数示意。一定是目前国内最详尽讲解SVG SMIL animation动画的文章,没有之一。内容扎实,丰富的效果展示,大量的源码示意。相信一定会对您的学习有所帮助的。

阅读全文…

理解SVG viewport,viewBox,preserveAspectRatio缩放

2014年08月27日 by 张 鑫旭 阅读 113492 次, 今日 120 次

本文内容平实,就是标题所提到的三个东西,viewport,viewBox,preserveAspectRatio, 都是学习SVG必须掌握的基础知识。一如既往,有demo,有截图,有源代码展示。希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS counter计数器(content目录序号自动递增)详解

2014年08月26日 by 张 鑫旭 阅读 60604 次, 今日 90 次

CSS计数器不是什么新鲜玩意了,早在10年春暖花开的时候,我写的“CSS content内容生成技术以及应用”一文就要提到,不过当时是作为其中一员介绍。就像例行的溜新同事一样,虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是其中一员。很自然,个把月之后,我就会被无情的淡忘,除了那依稀的面庞,因为毕竟长得还算比较抽象。

然而,CSS计数器的斗量显然不是短短几句介绍能够显露的,所谓人不可貌相。今天,就大肆笔墨,好好地全面地介绍了下CSS计数器,确实有很多知识点,确实有很多不太好理解的地方,确实有很多会踩坑的地方,果然深不可测。不过,本文有着详实的文字,丰富的截图,完全的demo,必要的源代码展示。相信本文的内容会对你的学习有所帮助的!

阅读全文…

图片主色获取脚本rgbaster.js小介绍小使用

2014年08月12日 by 张 鑫旭 阅读 51887 次, 今日 57 次

本文的主要内容就是图片主色获取脚本rgbaster.js小介绍小使用,有demo有截图有源代码展示,不短不长,有吐槽,但不过火。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

SVG图标颜色文字般继承与填充

2014年07月22日 by 张 鑫旭 阅读 81540 次, 今日 91 次

前文介绍了SVG Sprites身材和内涵,顺大便客观的评价了SVG Sprites比font-face高几层楼的事实(看看外国同行的对比)。但是呢,人总是这样,总是容不得说自己现在使用东西的不好。于是乎,不经意间戳动了点小小的自尊。导致文章也没细读就大肆反驳:SVG图标颜色要内联设置,不像font-face那样好控制!而且还不只一位兄弟这么说。
其实呢,我并不忍心说实话的:SVG图标颜色控制要比font-face有过之而无不及……

阅读全文…

未来必热:SVG Sprite技术介绍

2014年07月10日 by 张 鑫旭 阅读 115930 次, 今日 86 次

未来必热:SVG Sprite技术介绍
本文是本月文章的压轴篇,介绍SVG Sprite技术的。内容丰富大而全,面向各个人群,无论你是开发还是设计,还是纯正的前端,都可以在web中使用SVG Sprite技术,比CSS Sprite技术应用还要简单。可谓老少皆宜,出门旅行,必备佳肴。好了,就不调皮了,截图比较多,内容也不少,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

HTML5 <template>标签元素简介

2014年07月8日 by 张 鑫旭 阅读 148250 次, 今日 84 次

<template>标签元素基本上可以确定是2013年才出现的新的标签元素,主流的Chrome以及Firefox浏览器很快就支持了这个标签,可见这个标签的出现还是呼声很高的。作为有特性行为表现的标签,其中还是有很多tips可以共享的,本文就将简单介绍下<template>标签元素的一些特异之处,有demo,有源代码展示,希望本文的内容能够对你的学习有所帮助。

阅读全文…

小tip: SVG和Canvas分别实现图片圆角效果

2014年06月30日 by 张 鑫旭 阅读 48402 次, 今日 39 次

实现图片圆角的方法很多,图片覆盖,CSS3圆角,SVG, Canvas都可以实现,前两个大家可能都比较熟悉,这里,着重介绍后面2种技术实现。希望在某一时刻对有需要的同行能有帮助。必须的,有demo, 有截图,有源代码展示。

阅读全文…

SVG+JS path等值变化实现CSS3兴叹的图形动画

2014年06月24日 by 张 鑫旭 阅读 110964 次, 今日 74 次

数值变化驱动的SVG图形动画

展示SVG动画的优势与潜力,介绍SVG动画实现的基本理论,Snap.svg.js进一步的实例应用展示。多多demo,多多帅气的效果,多多通俗易懂的解释。希望本文的内容能够对您的学习有所帮助。

阅读全文…