svg水滴融合効果を実現

10977 ワード
css
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>

この効果の鍵は、SVGフィルタを定義し、filterラベルで効果を定義し、cssで使用範囲にfilter:url(#goo)、'goo'はフィルタのidで、どのフィルタを使用するかを説明することです.
  • キーラベル説明
  • feGaussianBlur:stdDeviceプロパティは、ブラーの度合い(ガウスブラー)を定義します.
  • feColorMatrix:valueプロパティマトリクスを使用してブレンドの色を定義します.
  • feBlend:inの値は原語の元の入力を表し、値は「SourceGraphic」と同じ要素の前の原語のresult属性値、「SourceGraphic」は要素図形自身を表し、result属性値は混合時の効果に対応する.blurであれば、接着箇所の効果はぼやけています.
    • 1023組の最小数——C/C++実現
    jQuery入門チュートリアル(2):基本構文