这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合分解动画特效。这些SVG动画特效使一些HTML元素。如菜单、分页button、APP、选择框等元素的过渡动画像几粒水滴一样融合分解。效果很的酷。

通过SVG Filters能够改动一个给定的图形,创建我们须要的结果。SVG中包括了一组能够运行各种操作的filter元素。

最常见的SVG filter效果是通过feGaussianBlur来制作模糊效果。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400">
<defs>
<filter id="blur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<rect x="50" y="50" width="500" height="300" fill="#8d81ac" filter="url(#blur)" />
</svg>

在线演示:http://www.htmleaf.com/Demo/201503111501.html

下载地址:http://www.htmleaf.com/html5/SVG/201503111500.html

7种炫酷HTML5 SVG液态水滴融合分解动画特效的更多相关文章

  1. 12种炫酷HTML5 SVG和CSS3表单浮动标签特效

    这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...

  2. 12种超酷HTML5 SVG和CSS3浮动标签效果

    这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...

  3. 程序猿必备的10款超炫酷HTML5 Canvas插件

    1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...

  4. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  5. HTML5 SVG实现过山车动画

    HTML5 SVG实现过山车动画是一款jQuery特效很酷的HTML5 SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,效果非常酷. http://www.hui ...

  6. 学习animate.css包含了一组炫酷、有趣、跨浏览器的动画

    1.animate.css包含了一组炫酷.有趣.跨浏览器的动画,可以在你的项目中直接使用. 第一步:引入animate.css样式文件或者引入某些平台的CDN文件: <head> < ...

  7. >炫酷的计时器效果Canvas绘图与动画<

    >炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...

  8. React Native 炫酷的动画库 实现任何AE动画 lottie-react-native

    lottie-react-native 传送门 1.npm i --save lottie-react-native 2.react-native link lottie-ios 3.react-na ...

  9. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

随机推荐

  1. 【题解】【CodeForces712C】Memory and De-Evolution

    [题目描述] 给定一个边长为xx的正三角形,现在每秒钟你可以改变其中一条边的长度(修改量整数),在改变过程中,每秒钟都需要保证改变后的三角形是合法的,且变成均为正整数. 现在需要最终把三角形改变成边长 ...

  2. python 12:list(range(...)) (转化参数列表)

    numbers = list(range(1,11)) #把范围产生的数字串转化为列表储存 print(numbers) 运行结果应该是: [1,2,3,4,5,6,7,8,9,10]

  3. struts2标签(五)

    标签体系结构 jsp出现目的是为了取代servlet,结果逻辑代码,数据库代码都放到了jsp页面中. 为了解决jsp中代码过多的问题,struts2标签分为普通标签和UI标签. 使用struts2标签 ...

  4. nginx单机1w并发设置

    关闭keep-live,提高链接回收 keeplive_timeout 0; events{ worker_connections 1024; } more /proc/sys/net/core/so ...

  5. 5.29MyBatis Generator

    二.MyBatis Generator CRUD(创建,检索,更新,删除) 与表结构匹配的Java POJO BLOB (binary large object),二进制大对象,是一个可以存储二进制文 ...

  6. 在命令提示符窗口下(cmd)使用指令操作并编译java代码,运行java编译代码

    使用cmd操作java代码,编译.java文件,运行.class文件. 操作步骤: 1:创建一个文件夹: 例如:在e盘根目录(\)下面创建一个名为Hello的文件夹: 使用md指令:如图 在e盘中会生 ...

  7. Deutsch lernen (09)

    1. die Rückmeldung, -en 反馈,回馈:(销假)报到 die Rückmeldung zur Arbeit 2. dringend a. 紧急的,急切的 Ich brauche d ...

  8. (转)PostGIS+QGIS+GeoServer+OpenLayers实现数据的存储、服务的发布以及地图的显示

    http://blog.csdn.net/gisshixisheng/article/details/41575833 标题比较长,主要呢是实现以下几点: 1.将shp数据导入到PostGIS中: 2 ...

  9. java mongodb 使用MongoCollection,BasicDBObject 条件查询

    废话不说,上代码 //链接数据库 MongoClient mongoClient = new MongoClient( "172.26.xxx.xxx" , 27017 ); Mo ...

  10. javaee IO流打印一行的方式

    package Dayin; import java.io.BufferedReader; import java.io.FileNotFoundException; import java.io.F ...