想写一篇关于 SVG 滤镜的文章已久,SVG 滤镜的存在,让本来就非常强大的 CSS 如虎添翼.让仅仅使用 CSS/HTML/SVG 创作的效果更上一层楼.题图为袁川老师使用 SVG 滤镜实现的云彩效果 -- CodePen Demo -- Cloud (SVG filter + CSS). 什么是 SVG 滤镜 SVG 滤镜与 CSS 滤镜类似,是 SVG 中用于创建复杂效果的一种机制.很多人看到 SVG 滤镜复杂的语法容易心生退意.本文力图使用最简洁明了的方式让大家尽量弄懂 SVG 滤镜的使…

本文将介绍一些使用 SVG feTurbulence 滤镜实现的一些有趣.大胆的的动效. 系列另外两篇: 有意思!强大的 SVG 滤镜 有意思!不规则边框的生成方案 背景 今天在群里面聊天,看到有人发这个表情包: 刚好最近一直在学习 SVG,脑海中就把这个表情包的效果和 feTurbulence 滤镜关联了起来. 如果我们有一张类似上图表情包的静态图,利用 feTurbulence 生成的噪声函数,运用在静态的表情包之上,再添加些许动画,是不是也能制作一张类似的动图效果呢? 什么是 SVG fe…

SVG滤镜绝对称得上是他最强大的功能之一,在不影响任何文档结构的前提下,允许你给你的矢量图形添加各种专业视觉效果,我个人给他的定义就是,把PS装到了网页上. 一.  SVG滤镜的原理 基本原理描述太多明显有违我们 "轻松打开" 的目的,这里简单的描述一下,SVG在使用了滤镜的元素里,不会将原始图形直接渲染出来,而是会将原始图形的像素信息渲染到临时位图中,然后由 filter元素指定的操作会被应用到这个临时位图,最终把计算结果渲染为最终图形输出. 举个例子,我们用腾讯云的CVM图标来做一…

作者:凹凸曼 - 暖暖 SVG 即 Scalable Vector Graphics 可缩放矢量图形,使用XML格式定义图形. 一.SVG印象 SVG 的应用十分广泛,得益于 SVG 强大的各种特性. 1.1. 矢量 可利用 SVG 矢量的特点,描出深圳地铁的轮廓: 1.2.iconfont SVG 可依据一定的规则,转成 iconfont 使用: 1.3. foreignObject 利用 SVG 的 foreignObject 标签实现截图功能,原理:foreignObject 内部嵌入 H…

CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯定不能跟ps相比,但是利用的好的话可以在节约很多空间下,把一张图做成两张图的效果. 1定义 filter,从字面意思来看就是滤镜,官方定义filter属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度):举个栗子: <style> img{ /*灰度100%*/ -web…

超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有缓存时候是无动画效果,此时您可以试着[右键-新标签页打开图片]. 一.SVG SMIL animation概览 1. SMIL是什么?SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Lang…

本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有缓存时候是无动画效果,此时您可以试着[右键-新标签页打开图片]. 一.SVG SMIL animation概览 1. SMIL是什么?SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体集成语言)的首字母缩写简称,是有标准…

先常规先引入Raphael库: <script src="raphael.js" type="text/javascript"></script> 然后就很简单了,直接操作,也不用再手动写svg什么的. 1.新建画布 //x,y是画布的定位,w,h是画布的宽高 let paper = Raphael(x,y,w,h); 2.建立图形 // Raphael总共有6种图形画,其中path是万能的 let rect = paper.rect(50,…

之前在公众号转发了好友 Vajoy 的一篇文章 -- 巧用 CSS 把图片马赛克风格化. 核心是利用了 CSS 中一个很有意思的属性 -- image-rendering,它可以用于设置图像缩放算法. 何为 image-rendering? CSS 属性 image-rendering 用于设置图像缩放算法.它适用于元素本身,适用于元素其他属性中的图像,也应用于子元素. 语法比较简单: { image-rendering: auto; // 默认值,使用双线性(bilinear)算法进行重新采样…

在上次写完这篇文章 -- 巧用渐变实现高级感拉满的背景光动画 之后,文章下面的评论有同学留言,使用 CSS 可以实现极光吗? 像是这样: emmm,这有点难为人了.不过,最近我也尝试着去试了下,虽然不可能模拟出那么真实的效果,但是使用 CSS 还是可以作出类似的一些特效的,今天我们就一起来尝试下. 观察了一些极光的图片之后,我发现了极光动画中一些比较重要的元素: 基于深色背景的明亮渐变色彩 类似于水波流动的动画效果 明亮渐变色彩我们可以尽量使用 渐变 模拟.而水波流动的动画效果,在 SVG 滤镜…