这是一组使用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. [CodeForces522B] Photo to Remember

    某一天,n个朋友在一起聚会,他们已经很久没见了,于是他们决定拍照留念. 简单的说,拍照的时候,每个人有一个高度和宽度,第i个的高度和宽度分别是hi和wi.这些人排成一条直线,照片的最小的面积必须包含所 ...

  2. ROS-TF-监听

    前言:监听第一只海龟的位置,然后让第二只海龟跟随第一只海龟. 通过监听tf,我们可以避免繁琐的旋转矩阵的计算,而直接获取我们需要的相关信息. 一.新建cpp文件 新建turtle_tf_listene ...

  3. python 线程池和锁

    一.死锁现象与递归锁 锁:Lock线程安全,多线程操作时,内部会让所有线程排队处理.如:list/dict/Queue        线程不安全 + 人 => 排队处理. import thre ...

  4. vue 使用localStorage保存页面变量到浏览器变量中

    const STORAGE_KEY = 'todos-vuejs'//定义常量保存键值 export default{ fetch(){ return JSON.parse(window.localS ...

  5. 从XMLHttpRequest中获取请求的URL

    在编写Ajax通用错误处理程序时,经常需要记录发生错误的XMLHttpRequest的请求URL.但查询文档,并未找到从XMLHttpRequest中获取请求URL的方法. 在javascript - ...

  6. I2C controller core之Bit controller(05)

    6 generate statemachine 1 -- port cmd_ack : out std_logic; -- command completed 4 -- architecture ty ...

  7. asp.net mvc 学习步骤

    入门篇(一) ASP.NET MVC案例教程(基于ASP.NET MVC beta) http://www.cnblogs.com/leoo2sk/archive/2008/10/27/1320285 ...

  8. CorelDRAW2019新耀发布会,报名即可领红包!

    ​30年时光荏苒!眨眼风惊雨过. 在1989年的春天,CorelDRAW 1.0正式发布,一经面世就掀起了图形设计行业革命浪潮,这个图形工具不仅给设计师提供了矢量图像.页面设计,更能应用于网站制作.位 ...

  9. SharePoint Designer 2013 开启新式验证(Modern Authentication)

    首先安装office 2013全家桶 再安装SharePoint Designer 2013 安装完之后,去windows检查更新,并把所有需要更新的都更新了 (更新之后我还通过KMS激活了offic ...

  10. Spring实战(中文4,5版) PDF含源码

    Spring实战 读者评价 看了一半后在做评论,物流速度挺快,正版行货,只是运输过程有点印记,但是想必大家和你关注内容,spring 4必之3更加关注的是使用注解做开发,对于初学者还是很有用,但是不排 ...