【CSS使用svg配合filter(滤镜)实现粒子效果】

svg

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，具有可伸缩性和互操作性，被广泛应用于web开发中。

filter

而filter是SVG中的一个功能强大的元素，通过filter可以对SVG图形进行各种滤镜效果处理，包括模糊、阴影、光晕、颜色调整等。

粒子效果是一种非常流行的SVG滤镜效果，它可以在SVG图形中添加大量的小球或点，形成漂浮、飘动或爆炸等效果，非常适用于动态图形的呈现。下面将介绍一种通过SVG配合filter实现粒子效果的方法。

创建SVG容器

首先，我们需要创建一个SVG容器，并在其中添加一个形状，作为粒子的发射器。这个形状可以是一个圆形、矩形或路径（可以自己定义，看最后提示），下面以圆形为例：

<svg width="500" height="500">
  <filter id="particle-effect">
    <feTurbulence type="fractalNoise" baseFrequency="0.05" seed="1" numOctaves="2" result="turbulence" />
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="30" xChannelSelector="R" yChannelSelector="G" />
  </filter>
  <circle cx="250" cy="250" r="100" fill="none" stroke="red" stroke-width="4" filter="url(#particle-effect)" />
</svg>

这里使用了一个id为"particle-effect"的filter滤镜，它包含了两个filter效果：feTurbulence和feDisplacementMap。feTurbulence用于生成一种噪声图形，而feDisplacementMap用于将这种噪声图形应用到源图形中，从而产生扭曲和变形效果。

添加内容

接下来，我们需要在SVG容器中添加一些小球或点，作为粒子的效果。这里我们可以使用circle或rect元素来实现。（可以自己定义，看最后提示）具体代码如下：

<svg width="500" height="500">
  <filter id="particle-effect">
    <feTurbulence type="fractalNoise" baseFrequency="0.05" seed="1" numOctaves="2" result="turbulence" />
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="30" xChannelSelector="R" yChannelSelector="G" />
  </filter>
  <g filter="url(#particle-effect)">
    <circle cx="250" cy="250" r="100" fill="none" stroke="red" stroke-width="4" />
    <circle cx="250" cy="250" r="10" fill="blue" />
    <circle cx="200" cy="200" r="10" fill="blue" />
    <circle cx="300" cy="300" r="10" fill="blue" />
    <circle cx="200" cy="300" r="10" fill="blue" />
    <circle cx="300" cy="200" r="10" fill="blue" />
  </g>
</svg>

这里使用了一个g元素来包裹所有的小球或点，然后将filter应用到g元素上。这样，所有的小球或点都将受到filter效果的影响，形成了粒子效果。

现在你运行会发现如下图，并没有达到想要的动态粒子效果

添加动态效果

这个时候，就需要给feTurbulence 加动态，如下代码

<svg width="500" height="500">
  <filter id="particle-effect">
    <feTurbulence type="fractalNoise" baseFrequency="0.05" seed="1" numOctaves="2" result="turbulence" >
				<animate id="animate1" attributeName="baseFrequency" dur="1s" from="0.5" to="0.55" begin="0s;animate1.end">
				</animate>
				<animate id="animate2" attributeName="baseFrequency" dur="1s" from="0.55" to="0.5" begin="animate2.end">
				</animate>
			</feTurbulence>
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="30" xChannelSelector="R" yChannelSelector="G" />
  </filter>
  <g filter="url(#particle-effect)">
    <circle cx="250" cy="250" r="100" fill="none" stroke="red" stroke-width="4" />
    <circle cx="250" cy="250" r="10" fill="blue" />
    <circle cx="200" cy="200" r="10" fill="blue" />
    <circle cx="300" cy="300" r="10" fill="blue" />
    <circle cx="200" cy="300" r="10" fill="blue" />
    <circle cx="300" cy="200" r="10" fill="blue" />
  </g>
</svg>

加完如下图，你就会得到一个动态的粒子效果，可以自己cv一下看看

提示：

普通的元素也是有filter属性的，也可以把效果加到自定义的div或其他元素上如下代码所示

<div id="">
			<div class="filter">
			</div>
			<svg width="100">
			    <filter id='filter'>
			        <feTurbulence baseFrequency="1">
			            <animate id="animate1" attributeName="baseFrequency" dur="1s" from="0.5" to="0.55" begin="0s;animate1.end">
			            </animate>
			            <animate id="animate2" attributeName="baseFrequency" dur="1s" from="0.55" to="0.5" begin="animate2.end">
			            </animate>
			        </feTurbulence>
			        <feDisplacementMap in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="B" />
			    </filter>
			</svg>
		</div>
	
<style type="text/css">
		.filter {
		    width: 200px;
		    height: 200px;
		    filter: url('#filter'); /* 开启滤镜 */
		    border-radius: 50%;
			background: #47cbfc;
		}

	</style>

效果如下：

这里生成的粒子效果跟原来的位置有点偏移，需要自己微调一下

当然，以上代码只是一个简单的粒子效果，我们可以通过调整feTurbulence和feDisplacementMap的参数，以及添加更多的规则算法，来创造出更加丰富的粒子效果。