7种炫酷HTML5 SVG液态水滴融合分解动画特效

这是一组使用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

时间： 2025-01-18 19:33:43

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

12种炫酷html5 svg加载loading动画特效

这是一款使用html5 svg制作的加载loading动画特效插件.该加载loading动画特效共有12种效果,使用img标签直接调用svg文件来生成各种SVG动态图片.关于在页面中使用SVG的方法可以参考这篇文章:<如何在网页中使用SVG>. 所有的现代浏览器都支持SVG(IE8及以下浏览器除外),你可以点的这里查看支持SVG的浏览器. 在线演示:http://www.htmleaf.com/Demo/201501071122.html 下载地址:http://www.htmleaf.com

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

这是一组效果非常炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完成,一部分则使用SVG来制作变形动画. 在前面已经发表了一篇关于SVG浮动标签的文章:14种CSS3炫酷表单input输入框美化效果.这篇文章中的浮动标签效果是它的一些补充,在原来14种效果的基础上有增加了12种更加炫酷的效果. 这些效果在所有最新版的现代浏览器中都测试通过,但是可能某些旧的浏览器会不支持这些效

炫酷CSS3鼠标滑过图片标题文字动画特效

这是一款使用CSS3制作的鼠标滑过图片标题文字动画特效.该特效在鼠标滑过图片的时候,会展现遮罩层,并在遮罩层上以旋转的方式使图片描述文字逐一展现. 在线预览源码下载使用方法 HTML结构 DEMO中使用bootstrap的网格系统来进行布局.整个图片放置在一个.box容器中,它里面的.box-content是图片的描述文本层. <div class="box"> <img src="img/1.jpg" /> <div clas

3种炫酷CSS3复选框checkbox动画特效

这是一款效果非常炫酷的CSS3复选框checkbox动画特效.这组复选框动画特效共3种效果,它们都是在原生checkbox元素的基础上进行了美化,在用户点击复选框的时候制作出非常酷的动画效果. 在线预览源码下载使用方法 HTML结构普通的HTML checkbox复选框控件的样式非常的平淡.在现代网页设计中,我们可以通过CSS3来为它设置更加漂亮的外观和动画特效.通过CSS的@keyframe属性,我们就可以制作出各种神奇的复选框动画特效. 在这些复选框动画的DEMO中,使用的都是无序

炫酷HTML5网页背景动画

炫酷HTML5网页背景基于Canvas绘制 function resized() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; ({ width, height } = canvas); width_half = width * 0.5; height_half = height * 0.5; canvasHypot = Math.hypot(width_half, height_half); ct

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效.这组特效共有12种不同的鼠标滑过图片效果,分为滑动.旋转和翻转3大类.它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作. 在线预览源码下载使用方法使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件. <link rel="stylesheet"

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

这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览源码下载使用方法 HTML结构该CSS3按钮边框动画特效中的按钮使用HTML的<button>元素来制作.各种效果非标设置不同的class.例如第一种效果的class为draw. <button class="draw">draw</button> CSS样式在CSS样式

【OneAPM】极客编程挑战#025：发挥想象生成漂亮炫酷的SVG动画效果

活动链接:http://www.gbtags.com/gb/share/5610.htm 本期挑战提供如下的SVG图形,请使用任何技术生成基于如下SVG图形的动画效果,看看谁设计的动画效果最酷 ~~ <svg width="720px" height="486px"> <g id="layer1"> <path style="fill:#888888" d="m 434.02002,3

9种炫酷CSS3图片预览展示特效

这是一组共9款CSS3炫酷图片预览展示动画特效插件.该效果开始时图片堆叠在一起,当鼠标滑过图片时,图片会以9种不同的方式展开,有扇形.平面展开等等非常酷的效果. 注意:每种效果的图片数量是固定的,数量不对显示出来的效果会不太美观. 在线演示:http://www.htmleaf.com/Demo/201503071477.html 下载地址:http://www.htmleaf.com/css3/css3donghua/201503071476.html