如何使用CSS实现微光效果

微光效果是通过在元素表面叠加带有透明度的渐变光影，配合动画让光影产生流动效果，从而在视觉上形成类似光线扫过的动态质感，这种效果不需要依赖JavaScript，仅用CSS就能实现。

核心实现原理

微光效果的实现主要依赖三个核心部分：

• 使用linear-gradient构建带有透明过渡的渐变背景，作为微光的光影层
• 通过::before或::after伪元素承载渐变背景，避免影响元素原本的内容展示
• 利用@keyframes定义动画，让伪元素的位置或旋转角度发生变化，形成光影流动的效果

基础按钮微光效果实现

最常见的是给按钮添加微光效果，下面是完整的实现代码：

/* 基础按钮样式 */
.btn {
    position: relative;
    padding: 12px 32px;
    background-color: #165dff;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    overflow: hidden; /* 隐藏超出按钮范围的微光部分 */
}

/* 微光层使用伪元素实现 */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    /* 构建从左到右透明度渐变的微光背景 */
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    /* 定义微光流动动画 */
    animation: shimmer 2s infinite;
}

/* 定义动画关键帧 */
@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 150%;
    }
}

对应的HTML结构如下：

<button class="btn">点击按钮</button>

文字微光效果实现

除了按钮，也可以给文字添加微光效果，核心思路是通过背景裁剪让渐变只显示在文字区域：

.shimmer-text {
    font-size: 32px;
    font-weight: bold;
    /* 设置文字颜色为透明，通过背景显示微光 */
    color: transparent;
    /* 微光渐变背景 */
    background: linear-gradient(
        90deg,
        #165dff 0%,
        #ff7d00 20%,
        #165dff 40%
    );
    /* 背景裁剪到文字 */
    background-clip: text;
    -webkit-background-clip: text;
    /* 背景尺寸设置更大，方便动画移动 */
    background-size: 200% 100%;
    /* 背景位置动画 */
    animation: text-shimmer 3s infinite linear;
}

@keyframes text-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

对应的HTML结构：

<div class="shimmer-text">微光文字效果</div>

实现注意事项

• 给承载微光伪元素的容器设置overflow: hidden，避免微光超出元素范围影响布局
• 渐变中的白色透明度可以根据实际需求调整，数值越高微光越明显
• 动画的时长和循环方式可以根据页面的整体节奏调整，避免过于突兀
• 如果元素本身有背景色，需要注意微光渐变和背景色的对比度，保证效果清晰可见

不同场景适配技巧

如果是卡片类的元素，可以将微光伪元素的宽度设置为100%，高度设置为比卡片更高的值，再配合旋转动画，就能实现斜向的微光扫过效果：

.card {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.3) 50%,
        rgba(255,255,255,0) 100%
    );
    animation: card-shimmer 3s infinite;
}

@keyframes card-shimmer {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

CSS微光效果linear-gradientanimation伪元素修改时间：2026-06-08 21:33:19