CSS怎样制作卡片悬浮弹性回弹？spring动画函数应用-css教程-PHP中文网

要实现卡片悬浮时的弹性回弹效果，需使用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怎样制作卡片悬浮弹性回弹？spring动画函数应用

制作卡片悬浮时的弹性回弹效果，在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

登录后复制

的强大之处，它允许我们定义控制点，使曲线在Y轴上超出0到1的范围，从而实现这种“弹性”或“回弹”的视觉效果。

如何选择合适的

cubic-bezier

登录后复制

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

选择合适的

cubic-bezier

登录后复制

值来模拟弹性，这本身就是一门艺术，也是一个需要反复尝试的过程。

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

登录后复制

中的四个值定义了贝塞尔曲线的两个控制点（P1和P2），它们决定了动画的速度曲线。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

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

P1y

登录后复制

或

P2y

登录后复制

的值超出常规的0到1范围。

P1y
登录后复制
或
P2y
登录后复制
大于1：当动画快结束时，它会“冲过头”，达到一个比最终状态更远的位置，然后回弹。这模拟了弹簧被拉伸后，回弹时力量过大导致短暂超出的效果。值越大，超出的幅度越大，弹性看起来越强。
P1y
登录后复制
或
P2y
登录后复制
小于0：动画开始时，可能会先反方向移动一点点，然后再朝目标方向移动。这在某些“吸入”效果中可能有用，但在简单的弹性回弹中较少用到。

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

cubic-bezier.com

登录后复制

，来可视化地调整这些值。通过拖动控制点，你可以实时看到动画预览，直到找到你满意的弹性感觉。

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

cubic-bezier

登录后复制

值作为参考：

轻微弹性（Subtle Bounce）：
```
cubic-bezier(0.175, 0.885, 0.32, 1.275)
```
登录后复制
这个曲线在动画结束时会有一个轻微的“跳动”，非常适合不希望效果过于夸张的场景。
中等弹性（Medium Bounce）：
```
cubic-bezier(0.34, 1.56, 0.64, 1)
```
登录后复制
这个值是解决方案中用到的，能产生比较明显的、令人愉悦的弹性回弹，感觉像是被轻轻弹了一下。
强弹性/剧烈回弹（Strong/Exaggerated Bounce）：
```
cubic-bezier(0.68, -0.55, 0.265, 1.55)
```
登录后复制
这个曲线会产生一个非常剧烈的“超调”和回弹，动画效果会很夸张，适合需要强烈视觉冲击的元素。但要小心使用，过度使用可能会让用户感到眩晕。

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

transition-duration

登录后复制

）和具体要变化的CSS属性来微调，才能达到最佳的视觉效果。

除了

transform

登录后复制

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

虽然

transform

登录后复制

属性（如

scale

登录后复制

、

translate

登录后复制

、

rotate

登录后复制

）是实现卡片悬浮和弹性回弹效果最常用且性能最好的选择，因为它直接操作元素的渲染层，不会引起页面重排或重绘，但我们也可以将这种“弹性”的缓动函数应用到其他一些CSS属性上，以增强视觉表现力。

```
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); /* 阴影更深 */
}
```
登录后复制
```
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); /* 亮度增加 */
}
```
登录后复制
```
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; /* 背景色变浅 */
}
```
登录后复制