当前位置：首页 > 文章列表 > 文章 > 前端 > CSS液态流动效果制作教程

CSS液态流动效果制作教程

2025-08-08 12:47:50 0浏览收藏

今天golang学习网给大家带来了《CSS液态流动效果制作教程》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

要制作CSS中像液体一样流动并变形的背景效果，核心是结合CSS filter（contrast和blur）与SVG滤镜（feTurbulence和feDisplacementMap）并通过动画驱动变化。1. 使用HTML结构创建多个液滴元素和一个包含SVG滤镜的容器；2. 在SVG中定义feTurbulence生成分形噪声纹理，并通过SMIL动画动态改变其baseFrequency以模拟流动；3. 使用feDisplacementMap根据噪声图对元素进行波浪式像素位移，实现变形效果；4. 在CSS中对容器应用filter: url(#liquid-wave-filter) contrast(15) blur(20px)，先变形再模糊融合，增强液态感；5. 为液滴添加移动动画，使其位置和大小周期性变化，促进视觉融合；6. 优化性能需控制元素数量、降低滤镜强度、合理使用will-change，并在prefers-reduced-motion下提供降级方案以保障用户体验，最终实现一种有机、流动的液态背景效果。

CSS如何制作液态背景流动效果？filter波浪变形动画

CSS中要制作那种像液体一样流动、还会变形的背景效果，尤其提到filter和波浪变形，核心在于巧妙地结合CSS的filter属性（特别是contrast和blur）与SVG的滤镜（feTurbulence和feDisplacementMap），再辅以CSS动画来驱动这些变化。这不仅仅是简单的位移或颜色渐变，它模拟的是一种有机、流动的视觉体验，有点像“变形虫”或者水波纹的感觉。

解决方案

要实现这种效果，我们需要几个核心元素：一个容器，里面放置一些将要“液化”的元素，以及一个SVG滤镜来制造波浪变形。

HTML 结构：

<div class="liquid-background-wrapper">
    <div class="liquid-blob blob-1"></div>
    <div class="liquid-blob blob-2"></div>
    <div class="liquid-blob blob-3"></div>
    <svg>
        <filter id="liquid-wave-filter">
            <feTurbulence type="fractalNoise" baseFrequency="0.005 0.009" numOctaves="1" result="noise"></feTurbulence>
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="50" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
        </filter>
    </svg>
</div>

CSS 样式与动画：

body {
    margin: 0;
    overflow: hidden; /* 防止滚动条出现 */
    background-color: #1a1a2e; /* 基础背景色 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.liquid-background-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    /* 关键的液态融合效果：对比度和模糊 */
    filter: url(#liquid-wave-filter) contrast(15) blur(20px); /* 先应用SVG滤镜，再应用CSS滤镜 */
    overflow: hidden; /* 确保内容不溢出 */
}

.liquid-blob {
    position: absolute;
    background-color: #e94560; /* 液体的颜色 */
    border-radius: 50%;
    opacity: 1;
    animation: blob-move 15s infinite alternate ease-in-out; /* 驱动元素移动 */
}

/* 定义不同大小和位置的blob */
.blob-1 {
    width: 400px;
    height: 400px;
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

.blob-2 {
    width: 300px;
    height: 300px;
    bottom: -15%;
    right: -15%;
    background-color: #0f3460; /* 另一种液体颜色 */
    animation-delay: 3s;
}

.blob-3 {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中 */
    background-color: #533483; /* 第三种液体颜色 */
    animation-delay: 6s;
}

@keyframes blob-move {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(20%, -15%) scale(1.1); }
    50% { transform: translate(-30%, 25%) scale(0.9); }
    75% { transform: translate(15%, 40%) scale(1.2); }
    100% { transform: translate(0, 0) scale(1); }
}

/* SVG滤镜动画，驱动波浪变形 */
@keyframes wave-flow {
    0% {
        filter: url(#liquid-wave-filter);
        /* 这里的baseFrequency值会通过JS或更复杂的SVG SMIL动画来动态改变 */
        /* 为了简化和纯CSS，我们直接在SVG中设置，并依赖feTurbulence自身的动态性 */
    }
    100% {
        filter: url(#liquid-wave-filter);
        /* 实际的流动感来自feTurbulence的baseFrequency或seed的变化，
           但纯CSS动画无法直接驱动SVG滤镜的内部参数。
           通常需要JS来动态修改feTurbulence的baseFrequency或seed属性。
           为了纯CSS演示，我们依赖feTurbulence的`type="fractalNoise"`和`baseFrequency`的组合效果。
           若要更明显的流动，可能需要改变feTurbulence的seed属性，这通常通过JS实现。
           或者，我们可以尝试在CSS中应用不同的滤镜，但那不是“变形”而是叠加。
           这里我选择保持SVG滤镜静态，主要依靠blob的移动和CSS filter的融合效果。
           如果非要CSS驱动SVG滤镜参数，那就要在SVG中定义多个filter，然后CSS切换。
           但更常见的“流动”效果，是通过JS动态更新feTurbulence的`baseFrequency`或`seed`。
           这里，我将简化，主要通过`contrast`和`blur`以及blob的移动来创造“液态”感，
           而`feTurbulence`则提供一个基础的“波浪”纹理，而非动态流动。
           如果真的要“流动”，那么SVG滤镜的`baseFrequency`或`seed`需要动画。
           我将在下面讨论如何用JS实现更强的流动感。
        */
    }
}

/* 重新审视，为了满足“filter波浪变形动画”，feTurbulence的参数必须动起来。
   纯CSS动画无法直接修改SVG滤镜内部参数。
   通常的做法是：
   1. 使用JS动态修改feTurbulence的baseFrequency或seed。
   2. 在SVG内部使用SMIL动画（但兼容性差，不推荐）。
   3. 模拟：通过CSS transform对整个容器做微小、随机的位移或旋转，配合blur和contrast。
   4. 更直接的方式：在CSS中定义多个filter，然后通过keyframes切换。但这仍然不是“变形”。

   考虑到标题明确指向“filter波浪变形动画”，最符合语义的是feTurbulence的动画。
   既然不能纯CSS，那么这个“解决方案”部分就得坦诚这一点，并提供最接近的纯CSS方案，
   或者在后续副标题中说明需要JS辅助。

   为了保持纯CSS的约束，我将调整思路：
   液态效果（contrast+blur） + 波浪变形（feTurbulence静态提供纹理） + 动画（blobs移动）。
   如果真的要“波浪变形动画”，那么feTurbulence的baseFrequency或者seed需要动。
   最简单粗暴的纯CSS方式是：在`liquid-background-wrapper`上直接应用一个简单的`filter`动画，
   例如`filter: blur()`值的变化，但这与“波浪变形”的语义不符。

   所以，我将回到最初的SVG滤镜方案，并坦诚其局限性，或者在后续部分补充JS方案。
   为了“波浪变形动画”这个核心，我必须在SVG中动画feTurbulence。
   这可以通过CSS的`filter: url()`引用，但CSS无法直接动画SVG滤镜的内部属性。
   所以，这里的“波浪变形动画”部分，如果严格遵守纯CSS，会是难点。

   我将采取以下策略：
   - 解决方案：给出最接近的纯CSS实现，即结合`contrast`/`blur`和`feTurbulence`，并让blob动起来。
   - 在后续副标题中，详细解释`feTurbulence`的动画通常需要JS，并提供一个JS示例，或者解释纯CSS的局限性。
   - 这样既满足了标题，又保持了真实性和技术深度。
*/

/* 重新考虑SVG滤镜的动画部分，为了纯CSS，可以这样：
   在SVG中定义一个动画，虽然SMIL兼容性不佳，但它确实是SVG内部的纯动画。
   或者，我们接受“波浪变形”是静态的纹理，而“流动”来自blobs的移动和融合。
   但标题是“波浪变形动画”，所以波浪本身应该动。
   我决定在SVG内部使用SMIL动画，并提醒其兼容性问题，因为这是纯SVG/CSS能做的。
*/

/* 最终的SVG滤镜动画策略：
   为了满足“波浪变形动画”且尽量纯CSS，我将使用SVG的`animate`标签来动画`feTurbulence`的`baseFrequency`。
   这虽然是SVG SMIL动画，但它被CSS `filter: url()`引用，且是声明式动画。
   同时，我会提到更好的兼容性方案是JS。
*/

/* 修改HTML中的SVG部分 */
```html
<div class="liquid-background-wrapper">
    <div class="liquid-blob blob-1"></div>
    <div class="liquid-blob blob-2"></div>
    <div class="liquid-blob blob-3"></div>
    <svg width="0" height="0" style="position: absolute;"> <!-- 隐藏SVG，但滤镜可用 -->
        <filter id="liquid-wave-filter">
            <feTurbulence type="fractalNoise" baseFrequency="0.005 0.009" numOctaves="1" seed="0" result="noise">
                <!-- 动画baseFrequency，模拟流动感 -->
                <animate attributeName="baseFrequency" values="0.005 0.009; 0.008 0.012; 0.005 0.009" dur="20s" repeatCount="indefinite"></animate>
            </feTurbulence>
            <feDisplacementMap in="SourceGraphic" in2="noise" scale="50" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
        </filter>
    </svg>
</div>

再次审视CSS部分，确保filter的顺序和值：filter: url(#liquid-wave-filter) contrast(15) blur(20px); 这个顺序很重要。先应用SVG滤镜进行波浪变形，然后CSS滤镜进行对比度和模糊，这样才能让变形后的“噪音”与颜色融合。

为什么传统的CSS动画难以实现真实的液态效果？

我们日常用的CSS动画，比如transform、opacity、background-position，它们本质上都是对元素的几何属性或视觉属性进行精确的控制。你可以让一个方块移动、旋转、缩放，甚至淡入淡出，但这些操作都保持了元素的独立性和形状的完整性。想象一下水滴，当它们接触时会融合，形成更大的水滴，表面也会有张力引起的波动和变形。传统的CSS动画很难直接模拟这种“融合”和“变形”的物理行为。

比如说，你用transform: translateX()让两个圆靠近，它们只会重叠，并不会像液体那样边界模糊地融为一体。这是因为CSS的渲染模型是基于盒模型的，每个元素都有明确的边界。而液态效果的关键在于打破这种边界感，让相邻的颜色或形状在视觉上“混合”在一起。要达到这种效果，就需要更高级的图像处理能力，而这正是CSS filter属性，尤其是blur和contrast，以及SVG滤镜所擅长的领域。它们不是改变元素本身，而是改变元素渲染后的像素效果，从而实现了那种“模糊边界然后增强对比度”的视觉把戏，让模糊的重叠部分看起来像融合了。

SVG滤镜在液态效果中扮演了什么角色？

SVG滤镜，特别是feTurbulence和feDisplacementMap，是制作液态背景中“波浪变形”和“流动感”的幕后英雄。它们提供了一种在像素层面进行复杂图像处理的能力，远超传统CSS属性。

feTurbulence，顾名思义，就是“湍流”滤镜。它能生成各种随机的、看起来很自然的噪声纹理，比如Perlin噪声或分形噪声。这些噪声不是简单的点阵，它们具有一种有机、连续的特性，非常适合模拟自然界的纹理，比如云、火焰，当然也包括液体的表面波动。通过调整baseFrequency（基础频率，控制噪声的“粗细”）、numOctaves（八度层数，增加细节和复杂度）和seed（随机种子，改变噪声的图案）等参数，我们可以生成不同风格的“噪声图”。在我们的液态背景中，这个噪声图就是制造“波浪”或“涟漪”的基础。

而feDisplacementMap则是一个“位移映射”滤镜。它的工作原理是：它会获取一个输入图像（通常是你的原始图形或背景），然后根据另一个输入图像（通常就是feTurbulence生成的噪声图）的像素值来“推移”原始图像的像素。想象一下，噪声图的某个像素如果是亮的，它就可能把原始图像的对应像素往某个方向推得多一点；如果是暗的，就推得少一点。通过这种方式，原本平滑的图像就会根据噪声图的“指引”而发生不规则的扭曲和变形，看起来就像是被水波或者气流扰动了一样。

所以，当我们将feTurbulence生成的噪声图作为feDisplacementMap的位移源，并将其应用到我们的液态背景容器上时，那些原本因为blur和contrast而融合在一起的“液滴”边界，就会随着噪声图的“流动”而产生自然的波浪状变形，从而赋予整个背景一种活生生的流动感。通过动画feTurbulence的baseFrequency或seed，我们就能让这种波浪和变形持续不断地变化，形成动态的液态流动效果。

如何优化液态背景的性能和兼容性？

液态背景这种效果虽然炫酷，但对浏览器来说，它可不是个轻松的活儿。filter操作，尤其是blur、contrast以及SVG滤镜，都是计算量相对较大的。它们需要浏览器在渲染的最后阶段对大量像素进行处理，这会直接占用GPU资源。

首先，性能优化方面：

精简元素数量： 别放太多要“液化”的元素。几个精心放置和动画的div就足够了，太多只会增加渲染负担，导致卡顿。
限制滤镜强度： blur和contrast的值不要设置得过大。值越大，计算越复杂。在保证效果的前提下，尽量使用较小的值。
合理使用will-change： 如果你知道某个元素会频繁地进行滤镜动画，可以尝试在它上面添加will-change: filter;。这会提示浏览器提前为该元素的滤镜操作进行优化，但要小心使用，滥用反而可能导致性能下降。只在真正需要且动画持续时间较长时考虑。
动画属性选择： 尽量动画那些对性能影响较小的属性，比如transform（它通常能利用GPU硬件加速）。虽然filter本身是耗性能的，但我们可以优化驱动滤镜的动画。SVG滤镜内部的animate标签，其性能表现通常比JavaScript驱动的像素操作要好，因为它更接近浏览器原生的渲染管线。
测试与迭代： 在不同设备（尤其是移动设备）和浏览器上进行测试。你会发现，在高端PC上流畅的效果，在老旧手机上可能寸步难行。根据测试结果调整滤镜强度和动画速度。

其次，兼容性与用户体验：

浏览器支持： 现代浏览器对CSS filter和SVG滤镜的支持已经很好了。但对于一些非常老旧的浏览器，它们可能无法正确渲染。在这种情况下，考虑提供一个优雅的降级方案，比如一个纯色的背景或者一个简单的渐变背景。

prefers-reduced-motion： 这是CSS的一个媒体查询，它允许用户在操作系统层面表达他们对动画效果的偏好。有些用户可能对大幅度的视觉运动感到不适或眩晕。我们应该尊重用户的选择，为他们提供一个减少动画的版本：

@media (prefers-reduced-motion: reduce) {
    .liquid-blob, svg filter animate {
        animation: none !important; /* 禁用所有动画 */
        filter: none !important; /* 移除滤镜效果，显示一个静态背景 */
    }
    .liquid-background-wrapper {
        filter: none !important; /* 移除包裹器的滤镜 */
        background-color: #e94560; /* 提供一个纯色背景 */
    }
}

这样做，既保证了视觉效果，又兼顾了用户体验。