CSS怎样制作卡片悬浮立体效果？box-shadow多层投影叠加

絕刀狂花

发布时间：2025-08-13 15:29:01

552人浏览过

来源于php中文网

原创

要实现css卡片悬浮立体效果，核心是利用box-shadow多层叠加模拟光影变化，并结合transform创造位移与旋转的3d感，具体步骤为：1. 使用多层box-shadow，通过不同偏移、模糊和扩散值模拟近景与远景阴影；2. 悬浮时增大阴影的模糊与偏移，同时配合transform: translatey(-10px)使卡片上浮；3. 添加轻微rotatex和rotatey增强立体倾斜感；4. 应用transition实现平滑动画；5. 在父容器设置perspective营造3d透视环境；6. 使用transform-style: preserve-3d确保3d空间渲染；7. 优化性能时避免重排属性动画，优先使用gpu加速的transform和box-shadow；8. 添加will-change: transform, box-shadow提示浏览器优化；9. 考虑可访问性，通过@media (prefers-reduced-motion: reduce)关闭或简化动画；10. 在实际项目中通过测试平衡视觉效果与性能，最终实现既真实又流畅的悬浮立体感。

CSS怎样制作卡片悬浮立体效果？box-shadow多层投影叠加

CSS中制作卡片悬浮立体效果，特别是利用

box-shadow

的多层叠加，核心在于模拟光影变化和位移感。这不单单是视觉上的花哨，更是为了给用户一种可交互的反馈，让界面显得更有层次和活力。

解决方案

要实现一个带有立体感的卡片悬浮效果，我们主要依赖

box-shadow

来模拟不同深度的阴影，配合

transform

进行位移和透视变化。

我们先来一个基本的HTML结构：

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


    
        卡片标题
        这是一张具有悬浮立体效果的卡片。
        了解更多

接着是CSS部分。关键在于

box-shadow

的巧妙运用和

transition

的平滑过渡。

.card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    perspective: 1000px; /* 为3D变换提供透视深度 */
}

.card {
    width: 300px;
    padding: 25px;
    background-color: #fff;
    border-radius: 12px;
    /* 初始状态的阴影，通常是轻微的 */
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.08), /* 基础阴影 */
        0 10px 20px rgba(0, 0, 0, 0.05); /* 稍微扩散的远景阴影 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 平滑过渡 */
    position: relative; /* 为可能添加的伪元素或更复杂效果做准备 */
    transform-style: preserve-3d; /* 确保子元素在3D空间中 */
}

.card:hover {
    /* 悬浮时，卡片“浮”起来，阴影也随之加深和变化 */
    transform: 
        translateY(-10px) /* 向上抬升 */
        rotateX(2deg) /* 轻微的X轴旋转，增加立体感 */
        rotateY(-2deg); /* 轻微的Y轴旋转 */
    box-shadow: 
        0 14px 28px rgba(0, 0, 0, 0.25), /* 更深、更广的阴影 */
        0 10px 10px rgba(0, 0, 0, 0.22), /* 模拟近距离的强烈阴影 */
        0 0 0 3px rgba(0, 0, 0, 0.03) inset; /* 甚至可以尝试内阴影，虽然不常用 */
    /* 还可以考虑添加一个更远的、模糊的阴影来模拟光线扩散 */
    /* 0 30px 60px rgba(0, 0, 0, 0.1); */
}

.card h3 {
    margin-top: 0;
    color: #333;
}

.card p {
    color: #666;
    line-height: 1.6;
}

.card .btn {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 15px;
    transition: background-color 0.2s ease;
}

.card .btn:hover {
    background-color: #0056b3;
}

这里我用了多层

box-shadow

来制造深度。第一层通常是比较柔和、扩散的，模拟物体与背景之间的基础阴影；第二层可以更集中、颜色稍深，模拟更接近物体的阴影。悬浮时，这些阴影的参数会发生变化，同时卡片本身也进行微小的

transform

位移和旋转，这样就有了“浮起来”的真实感。

如何通过box-shadow模拟光影营造更真实的立体感？

要让

box-shadow

看起来更真实，不仅仅是叠加几层那么简单，它背后涉及的是对光线和物体关系的理解。我个人觉得，最关键的是要模拟出“光源”的存在。

首先，阴影的颜色选择。纯黑的阴影在很多情况下会显得生硬。更自然的做法是选择一个与背景色或主色调略微相关的深色，或者直接使用

rgba

，通过调整透明度来控制阴影的“浓度”。比如，如果背景是浅蓝色，阴影可以稍微带一点蓝调的深灰。

其次是阴影的偏移量（offset-x, offset-y）。这直接决定了“光源”的方向。如果你希望光源从左上方来，那么阴影就应该偏向右下方，即

offset-x

为正值，

offset-y

为正值。反之亦然。在悬浮效果中，卡片“抬升”，理论上它与背景的距离变大，阴影应该变得更模糊、更扩散，同时偏移量也可能略微增大，因为它离光源更近了（或者说，光线更容易从它下方穿过）。

Product Hunt

Product Hunt每天都在寻找最好的新产品。

下载

再者是模糊半径（blur-radius）和扩散半径（spread-radius）。模糊半径越大，阴影边缘越柔和。扩散半径则决定了阴影的实际大小。一个真实物体的阴影，通常是越靠近物体越清晰、越深，离物体越远则越模糊、越扩散。所以，我们可以叠加多层阴影：一层小的、模糊度较低的，模拟近处的阴影；一层大的、模糊度较高的，模拟远处的扩散阴影。悬浮时，远处的阴影会变得更明显。

举个例子，可以这样组合：

box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1), /* 基础、柔和的远景阴影 */ 0px 2px 5px rgba(0, 0, 0, 0.15); /* 更近、更清晰的近景阴影 */

悬浮时，这两个值都可以相应调整，比如：

box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2), 0px 7px 15px rgba(0, 0, 0, 0.25);

这种变化就模拟了卡片“浮起”后，与背景的距离变化导致阴影的形态也随之改变。

除了box-shadow，还有哪些CSS属性可以增强卡片悬浮的立体效果？

box-shadow

确实是核心，但它并非孤军奋战。要让卡片真正“活”起来，我们还得请出一些好帮手：

transform
属性：这是制造立体感和动态效果的利器。
- ```
translateY(-Npx)
```
  ：最直观的，让卡片向上平移，模拟“浮起”的效果。
- ```
rotateX(Ndeg)
```
  /
```
rotateY(Ndeg)
```
  ：轻微的X轴或Y轴旋转，能极大地增强立体感。想象一下，你从侧面看一个物体被抬起，它通常会有一个微小的倾斜。这种微小的旋转，配合阴影的变化，能让卡片看起来真的在三维空间中移动。
- ```
scale(N)
```
  ：虽然不常用在“立体”效果中，但微小的放大也能增加“靠近”的感觉。
transition
属性：没有它，所有的变化都会显得生硬。它负责让属性值在一定时间内平滑过渡。
- ```
transition: all 0.3s ease-out;
```
  是一个不错的起点。
```
cubic-bezier
```
  函数可以提供更精细的动画曲线，比如我上面示例中用的
```
cubic-bezier(0.25, 0.8, 0.25, 1)
```
  ，它会让动画开始时加速，结束时减速，显得更自然。
perspective
属性（应用于父元素）：如果你想让卡片有真正的3D旋转效果，而不是简单的2D平面上的倾斜，那么父元素上设置
```
perspective
```
至关重要。它定义了用户与3D场景的距离，距离越小，透视效果越明显。
transform-style: preserve-3d
(应用于卡片本身)：当你在卡片内部有子元素，并且希望这些子元素也能参与到卡片的3D变换中时，这个属性是必须的。它确保子元素在3D空间中渲染，而不是扁平化。