子匠_Zijor | 前端开发 / 程序媛 / 潜心学艺。

标签:SVG

环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)

缘由:

在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度【效果如下图所示】,且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”。当时第一…

+ 阅读更多

SVG绘图(二) —— 渲染满天星辰

看到一些炫酷的动画,总有种好想实现它,但是又无奈于腹中的代码量略少,只好不明觉厉,圆圆的大眼睛里满是对新事物的渴求。

在网页中嵌入动画,过去比较流行采用Falsh、Java Applet和微软的SilverLight,但他们的网页安全性、兼容性、难操作性以及文件的大小等缺陷让很多Web开发者又爱又恨。Gif依旧是个不错的选择,但遗憾的是并不能用DOM操控其中的元素。自从有了SVG、HTML5和CSS3,一些简单的平面动画的实现变得方便和简单,虽然他们在一些方面譬如兼容性和…

+ 阅读更多

SVG绘图(一)—— 线条逐帧动态渲染

相信大家都见过这样的神奇技术:一根线条构成的画能自动逐帧描绘自己,特么炫酷。这种技术用Flash和AE等工具来实现的话不算难事,可惜所得文件略大。在本文中,想介绍一种稍微高那么一点逼格的实现方法,用纯codes写。所用到的技术是 SVG + CSS3。

首先,你得明白SVG是啥东东。再次,你得知道CSS3自定义动画实现方法。

SVG (Scalable Vector Graphics ),可伸缩的矢量图形,在浏览器中改变尺寸,其图形质量不会有所损失。相比其它位图,SVG图像文件更…

+ 阅读更多

【笔记】SVG性能优化

一. SVG的优化
1. 把一些要重复使用的元素都写在元素里。的子元素在文档解析的时候也不会渲染,只有在引用的时候才渲染,所以这样就可以做到一次解析,处处渲染,而不是每次使用的时候都解析一次,渲染一次,从而提高了SVG的性能。
2. 使用内部的CSS样式表的渲染速度,要比使用外部的CSS样式表更快。
3. 在元素的属性x, y, width, height使用百分比的紧致界,能够将需

+ 阅读更多