要实现CSS渐变背景的灵动闪烁亮面滑动效果，核心思路是先创建一个带有亮面区域的渐变背景，再通过调整background-size让背景尺寸超出元素本身，最后用keyframes动画不断改变背景位置，就能模拟出亮面滑动的视觉效果。
基础渐变背景编写
首先需要定义一个包含亮面区域的线性渐变，这里我们使用linear-gradient来创建渐变，亮面部分可以用半透明白色或者浅色来模拟，示例代码如下：
/* 定义基础渐变背景，包含亮面区域 */
.gradient-box {
width: 300px;
height: 200px;
/* 渐变方向为45度，深色背景加中间亮面 */
background: linear-gradient(
45deg,
#1a1a2e 0%,
#1a1a2e 40%,
rgba(255, 255, 255, 0.8) 50%,
#1a1a2e 60%,
#1a1a2e 100%
);
/* 初始背景尺寸设为200% 100%，让亮面区域超出元素范围 */
background-size: 200% 100%;
background-repeat: no-repeat;
}
定义keyframes动画
接下来需要定义动画关键帧，让背景的位置不断发生变化，从而让亮面在背景上滑动。我们通过修改background-position的X轴值来实现滑动效果：
/* 定义滑动动画关键帧 */
@keyframes slideShine {
0% {
/* 初始位置，亮面在元素左侧外部 */
background-position: 200% 0;
}
100% {
/* 结束位置，亮面滑动到元素右侧外部 */
background-position: -200% 0;
}
}
绑定动画到元素
把定义好的动画绑定到之前的元素上，设置合适的动画时长和循环方式，就能看到亮面滑动的效果了：
.gradient-box {
width: 300px;
height: 200px;
background: linear-gradient(
45deg,
#1a1a2e 0%,
#1a1a2e 40%,
rgba(255, 255, 255, 0.8) 50%,
#1a1a2e 60%,
#1a1a2e 100%
);
background-size: 200% 100%;
background-repeat: no-repeat;
/* 绑定动画，2秒完成一次循环，线性匀速，无限循环 */
animation: slideShine 2s linear infinite;
}
参数调整技巧
可以根据实际需求调整相关参数，获得不同的视觉效果：
- 调整
background-size的X轴值：值越大，亮面滑动的距离越长，速度感越强 - 调整动画的
duration：时长越短，滑动速度越快，闪烁感越强 - 修改渐变中的亮面宽度：调整亮面区域在渐变中的占比，就能改变亮面的粗细
- 调整亮面的颜色透明度：改变
rgba的透明度值，可以控制亮面的明显程度
完整示例代码
下面是一个可以直接运行的完整示例，包含HTML和CSS部分：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS渐变背景亮面滑动效果</title>
<style>
.shine-container {
width: 400px;
height: 250px;
border-radius: 12px;
background: linear-gradient(
45deg,
#16213e 0%,
#16213e 35%,
rgba(255, 255, 255, 0.9) 50%,
#16213e 65%,
#16213e 100%
);
background-size: 250% 100%;
background-repeat: no-repeat;
animation: slideShine 1.8s linear infinite;
}
@keyframes slideShine {
0% {
background-position: 250% 0;
}
100% {
background-position: -250% 0;
}
}
</style>
</head>
<body>
<div class="shine-container"></div>
</body>
</html>
注意事项
使用这个效果时需要注意几个问题：
- 如果元素本身有内容，需要给内容设置更高的z-index，避免被背景遮挡
- 背景尺寸的设置要保证亮面能够完全滑出元素范围，否则会出现闪烁断层
- 如果需要在移动端使用，可以适当调大动画时长，避免视觉效果过于强烈
CSS渐变background-sizekeyframes亮面滑动修改时间：2026-07-23 21:03:29