CSS怎样制作卡片悬浮弹性回弹？spring动画函数应用

要实现卡片悬浮时的弹性回弹效果，需使用css的transition配合transform和cubic-bezier缓动函数。1. 常规的ease-out或linear无法实现弹性效果，因为它们的动画曲线限制在0到1之间，不会产生“超调”；而弹性效果需要动画值短暂超出目标再回弹。2. 选择合适的cubic-bezier值是关键：p1y或p2y超出0-1范围可实现超调，如轻微弹性用cubic-bezier(0.175, 0.885, 0.32, 1.275)，中等弹性用cubic-bezier(0.34, 1.56, 0.64, 1)，强弹性用cubic-bezier(0.68, -0.55, 0.265, 1.55)。3. 除transform外，box-shadow、filter和background-color等属性也可结合弹性缓动以增强视觉表现，但应优先用于transform和box-shadow以保持空间感协调，并配合will-change优化性能，最终通过反复调试找到最佳视觉平衡。

制作卡片悬浮时的弹性回弹效果，在CSS中主要依赖于

transition

transform

cubic-bezier

解决方案

要实现卡片的悬浮弹性回弹效果，你需要定义一个卡片的基础样式，并在其

:hover

transform

transition

/* 基础卡片样式 */
.card {
    width: 280px;
    height: 180px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    /* 核心：定义过渡属性，使用自定义的cubic-bezier模拟弹性 */
    /* 这里的cubic-bezier值 (0.34, 1.56, 0.64, 1) 能够产生明显的弹性效果 */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform, box-shadow; /* 优化性能 */
}

/* 悬浮时的效果 */
.card:hover {
    /* 向上平移并稍微放大 */
    transform: translateY(-10px) scale(1.03); 
    /* 增加阴影深度 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* 也可以为回弹（非hover状态）设置不同的缓动函数，使其更自然 */
/* 例如，鼠标移出时可以更平滑地返回 */
.card:not(:hover) {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

为什么常规的

ease-out

或

linear

无法模拟出“弹性回弹”效果？

在我看来，这是一个关于物理直觉和数学曲线的有趣问题。我们日常生活中看到的“弹簧”效果，比如一个弹簧被拉伸后放开，它不会立刻停在原位，而是会先越过原位一点点，然后反方向再越过一点点，如此往复，直到最终稳定下来。这是一种典型的“阻尼振动”过程。

立即学习“前端免费学习笔记（深入）”；

而CSS中常见的

ease-out

linear

• linear

  ：顾名思义，是线性变化的，动画速度恒定。想象一下一辆匀速行驶的汽车，它不会在停车时突然刹过头再倒回来。

• ease-out

  ：表示动画开始时速度较快，然后逐渐减慢直到停止。这就像一辆车在接近目的地时，逐渐减速并最终平稳停下。它永远不会“冲过头”。

它们的数学曲线在Y轴上始终保持在0到1之间（代表动画的进度从0%到100%）。要模拟弹性的“超调”效果，动画的进度需要在某个时刻暂时超过100%（或低于0%），然后再回到100%（或0%）。这正是

cubic-bezier

如何选择合适的

cubic-bezier

值来模拟不同强度的“弹性”？

选择合适的

cubic-bezier

cubic-bezier(P1x, P1y, P2x, P2y)

Rose.ai

一个云数据平台，帮助用户发现、可视化数据

下载

要创建“弹性”效果，关键在于让

P1y

P2y

• P1y

  或

  P2y

  大于1：当动画快结束时，它会“冲过头”，达到一个比最终状态更远的位置，然后回弹。这模拟了弹簧被拉伸后，回弹时力量过大导致短暂超出的效果。值越大，超出的幅度越大，弹性看起来越强。

• P1y

  或

  P2y

  小于0：动画开始时，可能会先反方向移动一点点，然后再朝目标方向移动。这在某些“吸入”效果中可能有用，但在简单的弹性回弹中较少用到。

我个人通常会使用一些在线工具，比如

cubic-bezier.com

这里提供几个我常用，且能产生不同强度弹性效果的

cubic-bezier

1. 轻微弹性（Subtle Bounce）：

   cubic-bezier(0.175, 0.885, 0.32, 1.275)

   这个曲线在动画结束时会有一个轻微的“跳动”，非常适合不希望效果过于夸张的场景。

2. 中等弹性（Medium Bounce）：

   cubic-bezier(0.34, 1.56, 0.64, 1)

   这个值是解决方案中用到的，能产生比较明显的、令人愉悦的弹性回弹，感觉像是被轻轻弹了一下。

3. 强弹性/剧烈回弹（Strong/Exaggerated Bounce）：

   cubic-bezier(0.68, -0.55, 0.265, 1.55)

   这个曲线会产生一个非常剧烈的“超调”和回弹，动画效果会很夸张，适合需要强烈视觉冲击的元素。但要小心使用，过度使用可能会让用户感到眩晕。

记住，这些值只是起点。实际应用中，你还需要根据动画的时长（

transition-duration

除了

transform

，还有哪些属性可以结合“弹性回弹”效果？

虽然

transform

scale

translate

rotate

1. box-shadow

   (阴影)： 当卡片悬浮时，通常会希望阴影变得更深、更扩散，以模拟“抬高”的效果。将弹性缓动函数应用到

   box-shadow

   的变化上，可以使阴影的变化也带有弹跳感，比如阴影先是变得非常深，然后略微回弹到最终的深度。这能极大地增强卡片的“浮动”感。

   .card {
       /* ...其他样式... */
       transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                   box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   .card:hover {
       /* ...transform 效果... */
       box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3); /* 阴影更深 */
   }

2. filter

   (滤镜)：

   filter

   属性可以改变元素的视觉效果，比如

   brightness

   （亮度）、

   contrast

   （对比度）、

   saturate

   （饱和度）等。在悬浮时，你可以让卡片的亮度或饱和度略微增加，并应用弹性缓动函数。例如，卡片在变亮时先是过亮一点，再回弹到目标亮度，这会带来一种“活跃”的感觉。

   .card {
       /* ...其他样式... */
       transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                   filter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   .card:hover {
       /* ...transform 效果... */
       filter: brightness(1.1); /* 亮度增加 */
   }

3. background-color

   (背景色)： 虽然不如

   transform

   或

   box-shadow

   那样直接产生“空间”上的弹性，但如果你的卡片背景色在悬浮时有变化，将弹性缓动应用到颜色过渡上，也能让整体效果显得更活泼。例如，颜色在过渡时会短暂地变得更亮或更暗，然后再回到目标颜色。

   .card {
       /* ...其他样式... */
       background-color: #ffffff;
       transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                   background-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   .card:hover {
       /* ...transform 效果... */
       background-color: #f0f0f0; /* 背景色变浅 */
   }

在实际开发中，我通常会建议优先将弹性效果应用到

transform

box-shadow

will-change