SVG滤镜白云飘飘效果实例页面

CSS代码：

/* 纯白色云朵 */
.cloud {
    width: 500px; height: 250px;
    margin: 3rem auto;
    position: relative;
}
.cloud:empty {
    filter: url(#cloudRandom);
    background: radial-gradient(closest-side, #fff var(--start-stop, 20%), #fffa var(--mid-stop, 60%), #fff0 80%);
    border-radius: 50%;
}
/* 带阴影的云朵 */
.cloud > i {
    position: absolute;
    width: inherit; height: inherit;
    border-radius: 50%;
}
.cloud-basic {
    filter: url(#cloudBasic);
    background: radial-gradient(closest-side, #fff 60%, transparent 80%)
}
.cloud-mid {
    filter: url(#cloudShadow);
    background: radial-gradient(closest-side at 50% 60%, rgba(100, 90, 80, 0.2), transparent 60%);
}
.cloud-shadow {
    background: radial-gradient(closest-side at 50% 70%, rgba(0, 0, 0, 0.05), transparent 40%);
    filter: url(#cloudShadow);
}

HTML代码：

<svg width="0" height="0" style="position:absolute;">
    <filter id="cloudRandom">
      <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" 
seed="0" />     
      <feDisplacementMap in="SourceGraphic" scale="170" />
    </filter>
</svg>
<h4>纯白云层</h4>
<p><button id="buttonRandom">随机云朵</button></p>
<div class="cloud"></div>

<svg width="0" height="0" style="position:absolute;">
    <filter id="cloudBasic">
      <feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="4" />     
      <feDisplacementMap in="SourceGraphic" scale="170" />
    </filter>
    <filter id="cloudShadow">
      <feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="2" />     
      <feDisplacementMap in="SourceGraphic" scale="140" />
    </filter>
</svg>
<h4>带阴影云层</h4>
<p><button id="buttonRandom2">随机变化</button></p>
<div class="cloud">
    <i class="cloud-basic"></i>
    <i class="cloud-mid"></i>
    <i class="cloud-shadow"></i>
</div>

JS代码：

// 白色云朵的随机
var eleButton = document.getElementById('buttonRandom');
var eleTurbulence = document.querySelector('#cloudRandom feTurbulence');
eleButton.addEventListener('click', function () {
    var eleCloud = document.querySelector('.cloud:empty');
    eleCloud.style.setProperty('--start-stop', (10 + 20 * Math.random()) + '%');
    eleCloud.style.setProperty('--mid-stop', (50 + 20 * Math.random()) + '%');
    
    eleTurbulence.setAttributeNS(null, 'seed', Math.round(100 * Math.random()));
});

var eleButton2 = document.getElementById('buttonRandom2');
var eleTurbulenceA = document.querySelector('#cloudBasic feTurbulence');
var eleTurbulenceB = document.querySelector('#cloudShadow feTurbulence');
// 带阴影云朵的随机变化
eleButton2.addEventListener('click', function () {
    var seed = Math.round(100 * Math.random());
    eleTurbulenceA.setAttributeNS(null, 'seed', seed);
    eleTurbulenceB.setAttributeNS(null, 'seed', seed);
});