CSS动画如何实现卡片背景渐变_background linear-gradient @keyframes使用

使用CSS实现卡片渐变动画需结合linear-gradient与@keyframes。1. 定义@keyframes gradientShift改变background-position实现流动效果；2. 为.card设置background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)，background-size: 400% 400%，并应用animation: gradientShift 5s ease infinite；3. 可选旋转渐变角度，推荐用background-image和background-position确保兼容性。最终实现纯CSS驱动的平滑渐变背景动画，适用于登录页或展示模块。

想要用CSS实现卡片背景的渐变动画，可以结合 background: linear-gradient 与 @keyframes 来完成平滑过渡的动态效果。这种方法无需JavaScript，纯CSS即可让背景色彩流动起来。

1. 定义渐变背景动画 @keyframes

使用 @keyframes 创建一个关键帧动画，改变 background-position 或直接切换 linear-gradient 的颜色角度/位置，从而产生流动感。

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

这个动画会让渐变背景在水平方向来回移动，形成色彩流动的效果。

2. 应用渐变背景到卡片

给卡片元素设置一个多重渐变背景，并启用动画。

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

.card {
  width: 300px;
  height: 200px;
  border-radius: 16px;
  padding: 20px;
  color: white;
  font-size: 1.5em;
  text-align: center;
<p>/<em> 设置渐变背景 </em>/
background: linear-gradient(
-45deg,</p><h1>ee7752,</h1><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;">#e73c7e,
#23a6d5,
#23d5ab

); background-size: 400% 400%; / 扩大背景区域，使动画更平滑 /

/ 启用动画 / animation: gradientShift 5s ease infinite; }

注意： background-size: 400% 400% 是为了让渐变超出元素范围，这样 background-position 动画才能有空间移动，产生流畅过渡。

神采PromeAI

将涂鸦和照片转化为插画，将线稿转化为完整的上色稿。

103

查看详情

3. 可选：仅改变渐变角度实现旋转效果

如果你想让渐变“旋转”，可以动画化 linear-gradient 的角度。

@keyframes rotateGradient {
  0% {
    background: linear-gradient(0deg, #ff9a9e, #fad0c4);
  }
  100% {
    background: linear-gradient(360deg, #ff9a9e, #fad0c4);
  }
}

⚠️ 注意：直接动画化 background 中的渐变角度 不被所有浏览器支持。更稳妥的做法是使用 background-image 配合 background-position 移动。

完整示例代码

把上面的内容整合成一个可运行的卡片动画：

<div class="card">渐变动效卡片</div>

.card {
  width: 300px;
  height: 200px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientShift 5s ease infinite;
}
<p>@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

基本上就这些。通过控制 background-position 和 background-size，配合 @keyframes，就能做出非常自然的渐变动画卡片，适合用于登录页、仪表盘或产品展示模块。

以上就是CSS动画如何实现卡片背景渐变_background linear-gradient @keyframes使用的详细内容，更多请关注php中文网其它相关文章！