当前位置：首页 > 文章列表 > 文章 > 前端 > CSS卡片阴影与动画效果实现技巧

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

2025-12-11 16:39:49 0浏览收藏

1. 基础卡片结构

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


  动态卡片
  悬停时触发阴影与背景动画

对应的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 阴影动画

Windows11重置后网络无法连接解决办法

上一篇: Windows11重置后网络无法连接解决办法

下一篇: 黑猫投诉平台官网入口及使用指南

查看更多