svg实现水滴相融效果

近来看见一个用svg做的菜单动画，对svg来了兴趣，研究了其中涉及的水滴粘合效果。这里贴上菜单动画链接

先看看效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{filter: url(#goo);}.circle{border-radius: 50%;width: 100px;height: 100px;position: relative;}.c1{background:#00b3ee;top: 30px;animation: t11Move 3s;}.c2{background:#ef3e4a;top:-30px;animation: t22Move 3s;}@keyframes t11Move{0%{top: 30px;}100%{top: 0}}@keyframes t22Move{0%{top: -30px;}100%{top: 0}}</style>
</head><body><div class="circle c1"></div><div class="circle c2"></div><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" /><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" /><feBlend in="SourceGraphic" in2="goo" /></filter></defs></svg>
</body>
</html>

该效果的关键在于filter标签，用来定义SVG滤镜，在filter标签中定义效果，然后在css中给使用范围添加filter:url(#goo),'goo’是滤镜的id，用来说明使用哪一个滤镜。

关键标签说明

feGaussianBlur：stdDeviation 属性可定义模糊的程度（高斯模糊）。
feColorMatrix：value属性使用矩阵定义混合的颜色。
feBlend：in的值表示原语的原始输入，值可用’SourceGraphic’和在同一个元素中前面的原语的result 属性值，'SourceGraphic’表示元素图形自身，result属性值则对应混合时的效果。若为blur，那粘合处的效果就是模糊的。

svg实现水滴相融效果相关推荐

道器相融，由Angel论一个优秀机器学习平台的自我修养
*本文首发于 AI前线 ,欢迎转载,并请注明出处. 摘要 2017年6月,腾讯正式开源面向机器学习的第三代高性能计算平台 Angel,在GitHub上备受关注:2017年10月19日,腾讯T4专家An ...
活得通透的人，早已与天地相融
在儒家学说里面,"修身齐家治国平天下"就是一个人一生的追求和最高的理想目标. 要想"齐家治国平天下",那么我们最基本要做到的,就是要懂得如何"修身&q ...
创意svg菜单栏水滴动画
下载地址创意svg菜单栏水滴动画,小型工具条,图标效果有滴水动画. dd:
多功能用途 Gooey Effects 7种炫酷HTML5 SVG液态水滴融合动画特效
查看原文查看在线演示Demo和更多原文内容教程: 7种炫酷HTML5 SVG液态水滴融合动画特效这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效.这些SVG动画特效使一些HTML ...
unity 模型渐变消失_Unity 雨水滴到屏幕效果
文章目录前言一.实现过程 1.代码 2.代码分步解析总结参考前言本文主要介绍用unity实现雨水滴到屏幕的效果,文章介绍的是基础实现,读完这篇文章再去实现复杂效果会更得心应手些.我们先看更 ...
unity 随机数_Unity 雨水滴到屏幕效果
文章目录前言一.实现过程 1.代码 2.代码分步解析总结参考前言本文主要介绍用unity实现雨水滴到屏幕的效果,文章介绍的是基础实现,读完这篇文章再去实现复杂效果会更得心应手些.我们先看更 ...
Unity 雨水滴到屏幕效果
文章目录前言一.实现过程 1.代码 2.代码分步解析总结参考前言本文主要介绍用unity实现雨水滴到屏幕的效果,文章介绍的是基础实现,读完这篇文章再去实现复杂效果会更得心应手些.我们先看更 ...
html svg波浪,CSS实现svg图片水纹波浪流动效果
CSS实现svg图片水纹波浪流动效果里面的其他颜色是自己加的,把下面代码自己改改就可以html> 标题 body { margin:0; background:red; } h1 { fo ...
114.使用SVG filter创建粘糊糊效果
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:https://github.co ...

svg实现水滴相融效果

svg实现水滴相融效果

svg实现水滴相融效果相关推荐

最新文章

热门文章