这是一组使用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. python 13:数字列表统计方法(min(list)、max(list)、sum(list))

    numbers = list(range(1,11)) print(numbers) print(min(numbers)) #获得列表最小值 print(max(numbers)) #获得列表最大值 ...

  2. 常用的 Maven 命令

    maven 命令的格式为 mvn [plugin-name]:[goal-name],可以接受的参数如下. -D 指定参数,如 -Dmaven.test.skip=true 跳过单元测试: -P 指定 ...

  3. ACM_一道耗时间的水题

    一道耗时间的水题 Time Limit: 2000/1000ms (Java/Others) Problem Description: Do you know how to read the phon ...

  4. 去除安卓apk中的广告

    一般来说,安卓应用很多免费的apk都是有广告的.尽管我们要坚持尊重开发者,帮帮他们点击广告赚钱来可持续发展,但是有的时候,很多游戏中游戏实在是太影响感觉了,当找不到汉化破解版本的时候,也许需要亲自把它 ...

  5. PHP获得文件的大小并转换格式

    利用filesize($filename)函数获得一个文件的大小 参数$filename为文件的绝对路径,返回的值是文件的大小字节数. 文件较大的时候看起来不方便,下面是一个格式化方法 functio ...

  6. JavaOO知识点小结一

    Java语言的特点是什么?简单 面向对象 跨平台 多线程 健壮性安全性 垃圾回收机制如何编译和执行java文件?产生帮助文档用什么命令?编译: javac 文件名执行: java 类名产生帮助文档 j ...

  7. Android 链接 手机有关问题及解决方案

    我出现的问题: 这是我百度的解决方案:

  8. HDU_1711_初识KMP算法

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. 01 DOS常用命令

    有时候没有可视化窗口,命令行对文件进行操作更方便快捷 cmd 命令弹出 dir 查看当前所在目录下的文件 ctrl+c 退出 \a 显示隐藏文件 cd /改变到根目录 dir /a 显示隐藏文件 di ...

  10. Django的Error汇总

    title: Django学习笔记 catalog: true subtitle: 11. Django_Error汇总 date: 2018-12-14 10:17:28 --- Django的Er ...