Liquid / Morphing
模拟液体表面波动的扭曲、融合或流动效果。通过 SVG feTurbulence + feDisplacementMap 滤镜实现真实的液态扭曲，配合 CSS border-radius 动画创造有机变形。
CSS Morphing 变形展示
/* SVG 液态滤镜核心 */
<filter id="liquid-filter">
<feTurbulence type="fractalNoise" baseFrequency="0.01 0.02" numOctaves="2">
<animate attributeName="baseFrequency" values="0.01 0.02;0.02 0.04;0.01 0.02" dur="8s" repeatCount="indefinite"/>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="30"/>
<feSpecularLighting surfaceScale="5" specularExponent="20">
<fePointLight x="-200" y="-200" z="300"/>
</feSpecularLighting>
</filter>
/* CSS 有机变形 */
@keyframes morph {
0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}
← 返回索引