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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-28

浏览次数：次

返回列表

使用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使用

想要用CSS实现卡片背景的渐变动画，可以结合 background: linear-gradient 与 @keyframes 来完成平滑过渡的动态效果。这种方法无需J*aScript，纯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;">#e73c7e,
#23a6d5,
#23d5ab

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

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

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

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

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

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

@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%; }
}