CSS怎样制作卡片悬浮弹性效果？cubic-bezier缓动函数

蓮花仙者

发布时间：2025-08-12 12:10:02

379人浏览过

来源于php中文网

原创

要制作带有弹性效果的css卡片悬浮动画，核心是使用cubic-bezier缓动函数模拟回弹感。1. 首先创建html结构，用div构建卡片容器和卡片元素；2. 在css中设置.card基础样式，包括尺寸、圆角、阴影及transition属性，关键在于transition使用cubic-bezier(0.68, -0.55, 0.265, 1.55)实现弹性缓动；3. 在.card:hover中定义transform: scale(1.05) translatey(-8px)和增强的box-shadow，使卡片悬浮时有放大上浮效果；4. 利用cubic-bezier的y值超出0-1范围产生“超调”运动，模拟真实物理弹性；5. 可结合filter、背景变化等属性增强层次感，但需注意性能；6. 在移动端应改用:active伪类配合简短动画作为点击反馈，并缩短过渡时间以提升流畅性，确保无障碍和交互清晰。最终通过协调多属性过渡与设备适配，实现生动且高性能的弹性悬浮效果。

CSS怎样制作卡片悬浮弹性效果？cubic-bezier缓动函数

要制作一个带有弹性效果的CSS卡片悬浮动画，核心在于巧妙运用

transition

属性配合

transform

，并选择一个能模拟“回弹”感的

cubic-bezier

缓动函数。这能让卡片在鼠标移入时，不仅仅是简单地放大或抬升，而是带有一点点超出然后回落的生动感，就像真的被轻轻推了一下。

解决方案

制作这种效果，我们通常会给卡片元素设置一个初始状态，然后在

:hover

伪类中定义它的目标状态，最后用

transition

来控制动画过程。关键在于

transition-timing-function

中使用一个具有“弹性”特性的

cubic-bezier

值。

首先，你需要一个基本的HTML结构，比如一个

div

作为卡片：

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

<div class="card-container">
    <div class="card">
        <h3>我的弹性卡片</h3>
        <p>鼠标悬浮上来，看看会发生什么。</p>
    </div>
    <div class="card">
        <h3>另一张卡片</h3>
        <p>体验一下这种生动的效果。</p>
    </div>
</div>

接着是CSS部分。这里我个人觉得，最直接有效的方式就是对

transform

属性进行过渡，并结合

box-shadow

来增强立体感。

.card-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 50px;
    background-color: #f0f2f5;
    min-height: 100vh; /* 确保页面有足够高度 */
    align-items: center;
}

.card {
    width: 280px;
    padding: 25px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    cursor: pointer;
    /* 核心过渡效果 */
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
                box-shadow 0.4s ease-out; /* box-shadow可以用不同的缓动函数 */
    will-change: transform; /* 性能优化，提前告知浏览器将要动画 */
}

.card h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 20px;
}

.card p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

.card:hover {
    /* 悬浮时放大并稍微向上移动，制造“浮起”感 */
    transform: scale(1.05) translateY(-8px); 
    /* 增加阴影深度，增强浮起效果 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

在这个例子里，

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

就是那个让卡片产生弹性“回弹”的关键。它会让卡片在动画过程中，先稍微超出目标位置，然后才慢慢回到目标位置，这种“超调”就是弹性感的来源。

cubic-bezier

缓动函数是如何模拟真实世界弹性的？

说实话，

cubic-bezier

这玩意儿，初看起来有点抽象，就是四个数字。但它实际上定义了一条贝塞尔曲线，这条曲线描绘了动画的“速度曲线”。想象一下，一个物体从A点运动到B点，它不是匀速的，也不是简单地加速或减速，它可能先猛冲一下，甚至冲过头一点点，然后再退回来，最终停在B点。这种非线性的运动轨迹，就是

cubic-bezier

在模拟的。

具体到弹性效果，我们通常会用到

坐标值超出

到

范围的

cubic-bezier

函数。

cubic-bezier(x1, y1, x2, y2)

中的

y1

和

y2

代表了控制点在垂直方向上的位置。当

y1

或

y2

小于0时，动画会先往反方向运动一点；当它们大于1时，动画会先往正方向运动“过头”一点。

比如我们用的

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

：

```
-0.55
```
这个值让动画在开始阶段，会有一个轻微的“向后拉扯”感，或者说，在达到目标之前，速度会有一个反向的加速。
```
1.55
```
这个值则让动画在接近结束时，会“冲过头”一点点，然后才回落到最终状态。

正是这种“负值”和“大于1”的组合，才创造出了那种先拉伸/压缩，再回弹/膨胀的物理效果。这就像你拉一根橡皮筋，松手时它会弹回去，但往往会稍微超过平衡点，然后才稳定下来。这种物理现象被巧妙地映射到了动画的速度曲线上，让数字化的动画看起来有了生命力。我觉得这才是

cubic-bezier

最有趣的地方，它能把抽象的数学曲线变成感性的视觉体验。

除了

transform

和

transition

，还有哪些CSS属性可以增强卡片悬浮效果的层次感？

当然，仅仅是

transform

和

transition

就能做出不错的弹性效果，但如果你想让卡片看起来更“高级”、更有层次感，还有一些属性可以考虑。我个人在做一些精细设计时，会把这些都纳入考量：

```
box-shadow
```
：这个是增强“浮起”感的利器。在悬浮时，你可以不仅仅是改变阴影的模糊半径和扩散半径，还可以稍微改变阴影的颜色，或者让它看起来更深邃。比如，从一个柔和的
```
rgba(0, 0, 0, 0.1)
```
变成一个更明显的
```
rgba(0, 0, 0, 0.2)
```
，甚至可以尝试添加多个阴影层来模拟更复杂的灯光效果。一个好的阴影变化，能让卡片看起来真的从页面上“抬”起来了。

AssemblyAI
转录和理解语音的AI模型

下载
```
filter
```
属性： 比如
```
filter: brightness(1.1);
```
或者
```
filter: saturate(1.2);
```
。当鼠标悬浮时，让卡片的内容稍微变亮或者颜色饱和度略微提高，能给用户一种“被点亮”的感觉。这种变化非常微妙，但往往能提升整体的精致度。不过要注意，
```
filter
```
的性能开销可能比
```
transform
```
略大，所以要适度使用。
背景变化： 虽然不如
```
transform
```
和
```
box-shadow
```
那么直接，但如果卡片有背景色或背景图，你可以在悬浮时对其进行微调。例如，背景色稍微变暗或变亮，或者背景图片进行一个微小的
```
background-position
```
移动。这种变化可以和卡片的“弹性”动画并行，增加视觉上的丰富性。
```
outline
```
或
border
：偶尔，我会给卡片在悬浮时添加一个细微的
```
outline
```
或
```
border
```
。这通常用于强调卡片的可点击性，或者作为一种品牌识别。但要小心，如果处理不好，可能会显得比较生硬，不如
```
box-shadow
```
那么自然。我通常会选择一个和卡片主色调相符的半透明边框，并且也让它有过渡效果。

这些属性的组合使用，可以创造出非常丰富的视觉反馈。关键在于保持协调，不要让每个属性的变化都过于突兀，而是相互衬托，共同营造出一种流畅、有深度的用户体验。

移动端设备上，如何优化卡片悬浮效果的用户体验？

这是一个非常实际的问题。在桌面端，我们有鼠标悬停（hover）的概念，但在移动设备上，用户主要通过触摸（tap）来交互，传统的“悬浮”状态几乎不存在。所以，照搬桌面端的悬浮效果到移动端，往往会导致体验不佳，甚至功能混乱。

重新思考“悬浮”的意义： 在移动端，用户点击一个元素通常意味着他们想要执行一个动作（比如打开详情页）。如果一个卡片在被点击后才出现悬浮动画，那这个动画就变成了“点击反馈”，而不是“悬浮预览”。所以，首先要明确，这个弹性效果在移动端是作为点击前的预览，还是点击后的视觉确认。

利用

:active

伪类： 最简单直接的替代方案是使用

:active

伪类。当用户手指触摸屏幕并按住卡片时，

:active

状态会被触发。你可以在这里应用一个短暂的、轻微的动画效果，比如一个快速的

scale(0.98)

和

box-shadow

变化，模拟一个“按下”的效果，并在手指抬起时迅速恢复。这提供了一种即时的视觉反馈，告诉用户他们的触摸被识别了。

/* 移动端优化示例 */
@media (max-width: 768px) {
    .card {
        transition: transform 0.1s ease-out, box-shadow 0.1s ease-out; /* 缩短过渡时间 */
    }
    .card:hover { /* 移动端通常不触发hover，但为了兼容性保留 */
        transform: none; /* 移除桌面端hover效果 */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    .card:active { /* 触摸按压时的反馈 */
        transform: scale(0.98) translateY(0); /* 略微缩小，模拟按下 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 阴影变浅 */
    }
}

我个人觉得，这种简短的

active

反馈在移动端是更符合直觉的。

性能考量： 复杂的
```
cubic-bezier
```
动画和多属性的
```
transition
```
在性能较低的移动设备上可能会造成卡顿。尤其是在滚动过程中，如果大量元素都有复杂的动画，会非常影响流畅度。所以，在移动端，我通常会简化动画，比如只保留
```
transform
```
的
```
scale
```
和
```
translateY
```
，并缩短
```
transition
```
的持续时间，或者干脆移除复杂的
```
cubic-bezier
```
，改用简单的
```
ease-out
```
。
无障碍性： 确保即使没有悬浮动画，卡片的可点击区域和内容依然清晰明了。对于依赖视觉悬浮效果来提示可交互性的设计，在移动端需要提供其他线索，比如明确的按钮样式或文本说明。