这是一组使用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. BZOJ 4808 二分图最大独立集

    思路: 棋盘是个二分图 那就把一个可以走的白点  向所有可以走的黑点连边 跑一个最大匹配   (匹配上了就代表这两个点不能共存) 最大独立集=sum-最大匹配 //By SiriusRen #incl ...

  2. POJ 2342 Anniversiry Party(TYVJ1052 没有上司的舞会)

    题意: P1052 没有上司的舞会 描述 Ural大学有N个职员,编号为1~N.他们有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.每个职员有一个快乐指数.现在有个周 ...

  3. React+Dva

    Reducer reducer 是一个函数,接受 state 和 action,返回老的或新的 state .即:(state, action) => state Effect app.mode ...

  4. ASP.NET Cache 实现依赖Oracle的缓存策略

    ASP.NET 中的缓存提供了对SQL依赖项的支持,也就是说当SQL SERVER数据库中的表或行中的数据被更改后,缓存中的页面就失效,否则,页面输出可一直保留在缓存当中.这确实为程序员提供了方便.但 ...

  5. 【sqli-labs】 less21 Cookie Injection- Error Based- complex - string ( 基于错误的复杂的字符型Cookie注入)

    这个和less20是一样的,唯一的不同在于添加了括号和使用了base64对cookie进行了编码(因为使用了base64_decode解码函数) admin被编码成了YWRtaW4=但是执行的SQL语 ...

  6. 浅析Python3中的bytes和str类型 (转)

    原文出处:https://www.cnblogs.com/chownjy/p/6625299.html#undefined Python 3最重要的新特性之一是对字符串和二进制数据流做了明确的区分.文 ...

  7. Java基础学习笔记: 多线程,线程池,同步锁(Lock,synchronized )(Thread类,ExecutorService ,Future类)(卖火车票案例)

    多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念.进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 线 ...

  8. C++调用Matlab函数求特征值

    最近需要用到C++和Matlab的混编,记录一下学习过程~ 要实现的是调用Matlab函数,求矩阵前k个最小的特征值及其特征向量. //C++ #include "engine.h" ...

  9. day009 文件操作

    文件操作 文件路径 d:\test.txt 编码方式 utf-8 gbk... 操作方式 操作方式:只读,只写,追加,读写,写读..... 以什么编码方式储存的文件,就以什么编码打开进行操作. 只读: ...

  10. 简单说基于JWT和appkey、sercurtyKey的SSO、身份认证方案

    环境介绍, 一个大的系统由多个子系统组成.典型地,假设有一个平台,其上接入了多个应用.则有几个常见的问题需要处理, 1.SSO(包括单个应用退出时,需要处理为整个系统退出): 2.平台跳转到应用.及应 ...