纯 CSS 液体变形：实现流体动画与粘性效果的黑魔法

纯 CSS 液体变形：一场关于流动与粘性的视觉魔术

各位看官，咱们今天聊点儿有意思的——纯 CSS 液体变形。听到这个名字，是不是感觉有点儿科幻？别怕，其实没那么玄乎，说白了就是用 CSS 做出那种像液体一样流动，甚至带点儿“粘性”的动画效果。

你可能见过这种效果，比如加载动画里，几个小球黏在一起，拉长变形，然后又分开；或者鼠标悬停在一个按钮上，按钮像果冻一样微微鼓起。这些效果，用 JavaScript 当然也能实现，但今天我们要挑战一下，看看只用 CSS，我们能玩出什么花样。

为什么要挑战纯 CSS？

你可能会问，JS 不是更灵活吗？干嘛非要用 CSS 这么“笨拙”的东西？

原因很简单：性能！CSS 动画通常由浏览器直接渲染，效率更高，尤其是在移动设备上，能省不少电。再者，纯 CSS 实现更简洁，代码量更少，更容易维护。最重要的是，挑战一下自己，突破 CSS 的边界，本身就是一件很有趣的事情。

液体变形的秘密武器：clip-path 和 filter: blur()

要想让东西看起来像液体，有两个关键要素：

不规则的形状： 液体可不会老老实实地保持方形，它会根据环境改变形状。
模糊的边缘： 真实的液体边缘通常不会像刀切一样锐利，而是会有些模糊，给人一种柔和的感觉。

而 CSS 正好有两把利器可以帮我们实现这两个要素：clip-path 和 filter: blur()。

clip-path：形状的雕刻师

clip-path 就像一把剪刀，可以按照我们指定的路径裁剪元素，让元素呈现出各种奇形怪状。你可以用 circle(), ellipse(), polygon() 等函数定义裁剪路径，甚至可以用 SVG 的 <path> 元素来定义更复杂的形状。

举个例子，我们想把一个 <div> 变成一个三角形：
```
.triangle {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
```
这行 CSS 代码的意思是，创建一个宽度和高度都是 100px 的蓝色 <div>，然后用 clip-path 将其裁剪成一个三角形，三角形的三个顶点分别是 (50%, 0%), (0%, 100%), (100%, 100%)。
filter: blur()：边缘的柔化剂

filter: blur() 就更简单粗暴了，它可以给元素添加模糊效果，让边缘变得柔和。只需要设置一个模糊半径，元素就会变得“雾蒙蒙”的。

比如，让一个 <div> 模糊一下：
```
.blurred {
  width: 100px;
  height: 100px;
  background-color: #28a745;
  filter: blur(5px);
}
```
这行 CSS 代码的意思是，创建一个宽度和高度都是 100px 的绿色 <div>，然后用 filter: blur(5px) 让其模糊，模糊半径为 5px。

打造流体动画的基础：多个圆形的叠加

现在我们有了 clip-path 和 filter: blur() 这两把利器，就可以开始打造流体动画的基础了。一个常用的技巧是，将多个圆形叠加在一起，然后通过动画改变它们的位置和大小，再利用 filter: blur() 将它们融合在一起，就能产生类似液体的效果。

想象一下，你在水面上扔了几颗石子，水面会泛起涟漪，这些涟漪相互叠加，形成各种形状。我们的流体动画也是类似的原理。

下面是一个简单的例子：

<div class="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

.container {
  width: 200px;
  height: 100px;
  position: relative;
  overflow: hidden; /* 隐藏超出容器的部分 */
  filter: blur(10px); /* 整体模糊 */
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%; /* 圆形 */
  background-color: #dc3545;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中 */
  animation: move 3s linear infinite; /* 动画 */
}

.circle:nth-child(1) {
  animation-delay: 0s;
}

.circle:nth-child(2) {
  animation-delay: 1s;
}

.circle:nth-child(3) {
  animation-delay: 2s;
}

@keyframes move {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(calc(-50% + 20px), calc(-50% + 10px)) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

这段代码创建了一个包含三个圆形的容器，每个圆形都围绕中心点做简单的位移和缩放动画。由于容器设置了 filter: blur(10px)，这些圆形会融合在一起，形成类似果冻的流动效果。

进阶技巧：利用 JavaScript 控制 CSS 变量

虽然纯 CSS 已经能实现一些简单的流体动画，但如果想实现更复杂的交互效果，比如根据鼠标位置改变液体的形状，就需要借助 JavaScript 的力量了。

我们可以利用 JavaScript 来控制 CSS 变量，从而动态改变元素的样式。CSS 变量（也叫自定义属性）允许我们在 CSS 中定义变量，然后在样式规则中使用这些变量。

举个例子，我们想让一个按钮的颜色根据鼠标的 X 坐标改变：

<button class="fluid-button">Hover me</button>

.fluid-button {
  --x: 50%; /* 默认的 X 坐标 */
  width: 200px;
  height: 50px;
  background-color: hsl(calc(var(--x) * 3.6), 100%, 50%); /* 根据 X 坐标改变颜色 */
  border: none;
  cursor: pointer;
}

const button = document.querySelector('.fluid-button');

button.addEventListener('mousemove', (event) => {
  const x = event.clientX - button.offsetLeft; /* 鼠标相对于按钮的 X 坐标 */
  button.style.setProperty('--x', `${x / button.offsetWidth * 100}%`); /* 设置 CSS 变量 */
});

这段代码首先在 CSS 中定义了一个名为 --x 的变量，表示鼠标相对于按钮的 X 坐标，默认为 50%。然后，我们用 hsl() 函数根据 --x 的值来改变按钮的背景颜色。在 JavaScript 中，我们监听按钮的 mousemove 事件，获取鼠标相对于按钮的 X 坐标，然后用 setProperty() 方法来更新 --x 的值。

这样，当鼠标在按钮上移动时，按钮的颜色就会根据鼠标的位置而动态改变，是不是很酷？

粘性效果的模拟：cubic-bezier 缓动函数

要想让流体动画看起来更逼真，还需要模拟出粘性效果。所谓粘性，就是指物体在运动时会受到阻力，导致运动速度变慢，甚至产生回弹。

在 CSS 动画中，我们可以通过 cubic-bezier 缓动函数来模拟粘性效果。cubic-bezier 允许我们自定义动画的速度曲线，从而控制动画的加速和减速过程。

cubic-bezier 函数接收四个参数，分别是两个控制点的 X 和 Y 坐标。通过调整这四个参数，我们可以创建各种各样的缓动效果，比如线性、加速、减速、回弹等等。

对于粘性效果，我们可以使用类似下面的 cubic-bezier 曲线：

transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);

这个 cubic-bezier 曲线的特点是，先加速超过终点，然后再回弹到终点，从而产生类似粘性的效果。

总结：CSS 液体变形的无限可能

纯 CSS 液体变形是一项充满挑战和乐趣的技术。虽然 CSS 在动画方面不如 JavaScript 灵活，但只要我们巧妙地利用 clip-path, filter: blur(), CSS 变量和 cubic-bezier 缓动函数，就能创造出令人惊艳的视觉效果。

当然，CSS 液体变形也有一些局限性。比如，对于复杂的物理模拟，CSS 还是力不从心。但对于简单的流动、变形和粘性效果，CSS 已经足够胜任。

希望这篇文章能给你带来一些启发，让你在 CSS 的世界里玩得更开心！记住，技术只是工具，创意才是灵魂。只要你有足够的想象力，就能用 CSS 创造出无限可能。

纯 CSS 液体变形：一场关于流动与粘性的视觉魔术

发表回复 取消回复

发表回复取消回复