这是一组使用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. android 可拖动控件 ontouchevent

    首先附上文章的转载内容的链接: 学习android 可拖动事件首先需要对android的屏幕和touchevent参数建立一个详细的知识结构. 1.android坐标系统 一.首先明确一下 andro ...

  2. CentOS7 搭建Kafka(二)kafka篇

    CentOS7 搭建Kafka(二)kafka篇 前面我们说了zookeeper的搭建,zookeeper运行后就可以着手搭建kafka了. 必看 喜欢官方文档的请移步:[http://kafka.a ...

  3. Shiro图解

  4. ThinkPHP5中的助手函数

    load_trait:快速导入Traits,PHP5.5以上无需调用 /** * 快速导入Traits PHP5.5以上无需调用 * @param string    $class trait库 *  ...

  5. 如何通过WallpaperManager(壁纸管理器)设置与修改壁纸?

    WallpaperManager(壁纸管理器),是手机壁纸相关的一个API的相关类.其设置壁纸常有如下三种方法可调用: - setBitmap(Bitmap bitmap):将壁纸设置为bitmap所 ...

  6. KVO的使用及底层实现

    1.概念 KVO(Key-Value-Observer)也就是观察者模式,是苹果提供的一套事件通知机制.允许对象监听另一个对象特定属性的改变,并在改变时接收到事件,一般继承自NSObject的对象都默 ...

  7. php常见报错

    Php常见错误提示 一.Fatal error: Call to undefined function……函数不存在,可能的原因:系统不存在这个函数且你也没自定义 二.syntax error, un ...

  8. 【Oracle】闪回表

    语法: FLASHBACK TABLE [ schema. ] table [, [ schema. ] table ]... TO { { { SCN | TIMESTAMP } expr| RES ...

  9. APICloud上啦加载下拉刷新模块

    apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...

  10. python jieba分词(添加停用词,用户字典 取词频

    中文分词一般使用jieba分词 1.安装 pip install jieba 2.大致了解jieba分词 包括jieba分词的3种模式 全模式 import jieba seg_list = jieb ...