首页 > 文章 > 前端

CSS卡片阴影与动画效果实现技巧

时间：2025-12-11 16:39:49 368浏览收藏

推广推荐

支持 PC / 移动端，安全直达

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《CSS卡片阴影与背景动画实现方法》，聊聊，我们一起来看看吧！

通过结合@keyframes、background动画和box-shadow，可创建具有动态视觉效果的CSS卡片。1. 创建基础卡片结构并设置渐变背景与阴影；2. 使用@keyframes定义background-position变化，配合background-size实现背景流动动画；3. 定义shadowPulse动画使阴影强弱交替，增强立体感；4. 可选:hover触发动画或transition实现悬停交互。最终通过组合bgShift与shadowPulse双动画，赋予卡片生动的动态表现，提升UI交互体验。

如何在CSS中制作卡片阴影和背景动画_box-shadow background @keyframes结合

在CSS中制作带有阴影和背景动画的卡片，可以通过 box-shadow、background 属性与 @keyframes 结合实现动态视觉效果。这种设计常用于提升按钮、卡片、产品展示等UI元素的交互感。

1. 基础卡片结构

先创建一个简单的HTML卡片容器：

<div class="animated-card">
  <h3>动态卡片</h3>
  <p>悬停时触发阴影与背景动画</p>
</div>

对应的CSS基础样式：

.animated-card {
  width: 300px;
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(45deg, #6a11cb, #2575fc);
  color: white;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
}

2. 使用 @keyframes 定义背景动画

通过关键帧让背景产生流动或颜色渐变移动的效果：

@keyframes bgShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

将动画应用到卡片，并设置背景为可移动的渐变：

.animated-card {
  background: linear-gradient(45deg, #6a11cb, #2575fc, #6a11cb);
  background-size: 300% 300%;
  animation: bgShift 4s ease infinite;
}

注意： background-size 大于100%才能看到位置变化；animation 设置 infinite 实现循环。

3. 结合 box-shadow 动画增强立体感

可以单独为阴影定义动画，让卡片看起来“呼吸”或“浮起”：

@keyframes shadowPulse {
  0% {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
  50% {
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  }
  100% {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
}

将两个动画同时启用：

.animated-card {
  animation: 
    bgShift 4s ease infinite,
    shadowPulse 3s ease-in-out infinite;
}

4. 添加悬停增强交互（可选）

如果只想在鼠标悬停时触发动画，可结合 :hover 使用：

.animated-card:hover {
  animation: 
    bgShift 3s ease infinite,
    shadowPulse 2s ease-in-out infinite;
  transform: translateY(-5px);
}

或者用 transition 控制 hover 时的平滑变化：

.animated-card {
  transition: all 0.3s ease;
}

.animated-card:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  transform: translateY(-6px);
}

这样既保留了基础动画，又在交互时强化视觉反馈。

基本上就这些。通过组合 @keyframes 控制 background 流动和 box-shadow 强弱变化，能让静态卡片变得生动。关键在于控制动画节奏、颜色协调和性能优化（避免过度重绘）。

好了，本文到此结束，带大家了解了《CSS卡片阴影与动画效果实现技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

CSS 阴影动画