文章关键字 ‘SVG Sprite’

学习了,CSS中内联SVG图片有比Base64更好的形式

2018年08月19日,星期日

CSS内联SVG文章头图

难免的,我们需要在CSS中内联SVG图形,以前我都是把SVG文件转换成Base64格式然后内嵌,最近发现,这并不是最好的方法,最好的方法是使用部分转义的SVG原始代码,兼容IE9+,而且颜色什么的可以直接在CSS中修改。这种方法具体真容是什么?有兴趣可以进去看下。其中有个炸裂的SVG在线压缩合并工具,相信你会喜欢的。

阅读全文…

CSS镂空图片transition过渡初加载背景色块问题解决

2016年02月25日,星期四

CSS镂空图片,由于颜色是CSS属性值控制,如color或者background-color, 因此可以实现transition过渡效果,同时节约资源。然而有个很严重的问题,就是加载时候,容易出现色块,而本文就将展示如何解决色块的问题,让好的技术更加适用!

有demo有截图有必要的源代码展示,希望本文的内容可以对您的学习有所帮助!

阅读全文…

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

2014年12月14日,星期日

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

阅读全文…

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

2014年07月22日,星期二

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

阅读全文…

未来必热:SVG Sprite技术介绍

2014年07月10日,星期四

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

阅读全文…