html5融合效果,7种炫酷HTML5 SVG液态水滴融合动画特效
这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效。这些SVG动画特效使一些HTML元素,如菜单、分页按钮、APP、选择框等元素的过渡动画像几粒水滴一样融合分解,效果非常的酷。
SVG Filters
通过SVG Filters我们可以修改一个给定的图形,创建我们需要的结果。SVG中包含了一种可以执行各种操作的filter元素,下面列出了一些可用的SVG filter元素:
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight
当使用一个SVG filter的时候,我们可以将一个操作的结构作为另一个操作的输入,从而创建出无限的动画效果。
最常见的SVG filter效果是通过来制作模糊效果。
所得到的结果如下图:
元素的in属性用于定义原始的SVG输入,可以使用下面的几个关键字:
SourceGraphic
SourceAlpha
BackgroundImage
BackgroundAlpha
FillPaint
StrokePaint
这里也可以使用指向前一个执行结果的字符串,通过执行结果字符串,我们可以创建连续的动画效果。在液态水滴融合动画特效中就是使用这种方法制作的。
更为复杂的例子是组合使用多个SVG filter来制作所需的效果,如 drop shadow 阴影效果:
得到的结果如下:
这种效果的原理是先移动元素,然后将该元素的副本进行模糊处理来制作阴影效果。通过feBlend使用in="SourceAlpha"简单的设置原始图像位于模糊图像的上面。该通道是原始图像的alpha通道,模糊后会变为黑色。
SVG Filters for HTML
在HTML元素上使用SVG Filters十分简单。可以在HTML页面中定义需要的SVG Filter,然后可以通过CSS样式表来使用它们:
.filterClass {
-webkit-filter: url("#goo");
filter: url("../index.html#goo");
}
定义一个没有-webkit-前缀的不同路径值有两个原因:一是为了使Firefox浏览器能够正确的找到该路径。二是对于相对路径,如果我们只使用#goo,它会在当前页面中查找样式表,而我们使用的是引用样式表,因此会找不到这个filter。通过设置这种设置,不论是内置样式表还是外部样式表,都可以正确的找到所需的filter。我们也可以通过JavaScript来添加filter。
function setFilter(value){
$effectContainer.css({
webkitFilter: value,
filter: value,
});
}
上面的value值类似于'url(#goo)'。
当前浏览器对在HTML元素上使用 SVG Filters 的支持非常好,可以查看这里。
下面是一些学习SVG Filters的好资料,可以学习参考:
应用举例
我们来看看其中的圆形菜单按钮例子的实现方法:
这种效果的HTML代码如下:
在HTML中定义一个内联的SVG对象:
接下来使用如上面所说的CSS filter 属性来指定filter的路径和样式:
.menu {
/* other styles */
-webkit-filter: url("#goo");
filter: url("../menu.html#goo");
}
下面来分析一些filter,filter的第一步操作是通过feGaussianBlur来模糊对象。
接下来是feColorMatrix过滤器,它在例子中的作用的增强alpha通道,于blur结合,创建更加强烈的模糊效果。
Learn more about how to apply a color matrix here.
最后,Wilder使某些元素可见,需要在模糊对象只是绘制原始的对象,为了做到这一点,我们在atop操作中使用feComposite过滤器。
html5融合效果,7种炫酷HTML5 SVG液态水滴融合动画特效相关推荐
- html5 loading游戏,12种炫酷html5 svg加载loading动画特效
12种炫酷html5 svg加载loading动画特效 刘振兴 代码分享 2015年11月23日 14182 3条评论 这是一款使用HTML5 SVG技术制作的12种炫酷html5 svg加载load ...
- html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
- 多功能用途 Gooey Effects 7种炫酷HTML5 SVG液态水滴融合动画特效
查看原文 查看在线演示Demo和更多原文内容教程: 7种炫酷HTML5 SVG液态水滴融合动画特效 这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效.这些SVG动画特效使一些HTML ...
- html边框炫酷效果,6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose
这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览 源码下载 使用方法 HTML ...
- html5 loader,7种基于GSAP的SVG Loader加载动画特效
这是一组效果非常炫酷的基于GSAP的SVG Loader加载动画特效.这组SVG加载动画特效共有7种效果,分别使用GSAP对SVG进行操纵,制作出各种炫酷的Loading加载动画效果. 这些SVG加载 ...
- jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效(推荐)
这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...
- CSS3和js炫酷点击按钮3D翻转动画特效
简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览 源码下载 ...
- 12种超酷HTML5 SVG和CSS3浮动标签效果
这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...
- html炫酷在线,程序猿必备的10款超炫酷HTML5 Canvas插件
1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...
最新文章
- HPE 的 OpenSwitch 项目得到 Linux 基金会支持
- Linux进程虚拟地址空间
- bzoj4525[Usaco2016 Jan]Angry Cows
- Win10+vs2013+Caffe静态库配置自己的工程
- 面试官问:malloc(0)时程序会返回什么?
- 比较两个表格的不同_两表数据的核对,WPS表格似乎更加方便容易
- 在计算机中dos代表什么意思,Boot是什么意思
- SSH (Struts2+Spring3.0+Hibernate3)框架(二) 框架的配置
- 切换账号_微软 Edge 更新:自动切换工作 / 生活账号,移动端上线集锦功能
- 超详细java中的ClassLoader详解
- 机器学习中的七种分类算法
- 在linux系统下做软raid教程
- HTTP中的status code什么意思
- java中判断字符是否为英文字母、中文汉字或者数字
- 乌镇互联网大会 阿里云飞天当选世界互联网代表性领先科技成果
- 将系统从机械盘重刷到固态盘“
- windows环境下利用python进行CGI配置
- Drools Accumulate 语法解析及使用
- python实现外星人入侵——4.主函数部分
- 安卓开发者的一些忠告
热门文章
- 没签订书面合同,怎样证明买卖关系是存在的?
- 自学js第十二天:DOM概念和基础操作
- UltraEdit_chinese_64.exe强大的记事本工具(带官网离线安装包和破解工具)破解教程
- 整天996,绩效却很一般?CTO让我用“峰终定律”做职场规划
- 详解js中的闭包(closure)以及闭包的使用
- 贪吃蛇—C—基于easyx图形库(下):从画图程序到贪吃蛇【自带穿墙术】
- php 高深题,高深的脑筋急转弯题目
- Houdini15 VOP Add Attribute参数传递错误,使用Bind Export替代
- vue自定义指令v-loading
- Git Cherry-pick (摘樱桃) 实现分支的部分提交合并到Master