svg实现水滴相融效果

svg实现水滴相融效果

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

先看看效果

 <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <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,用来说明使用哪一个滤镜。

  • 关键标签说明
  1. feGaussianBlur:stdDeviation 属性可定义模糊的程度(高斯模糊)。
  2. feColorMatrix:value属性使用矩阵定义混合的颜色。
  3. feBlend:in的值表示原语的原始输入,值可用’SourceGraphic’和在同一个元素中前面的原语的result 属性值,'SourceGraphic’表示元素图形自身,result属性值则对应混合时的效果。若为blur,那粘合处的效果就是模糊的。

你可能感兴趣的:(css)