使用 CSS 实现微光效果

什么是微光效果？

微光效果 是一种目前在网页设计中非常流行的趋势，它能赋予文章、文本或图像一种类似幻彩玻璃的视觉错觉。这看起来似乎像是只有某些昂贵的 CSS 框架才能实现的炫酷属性，但有趣的是，我们可以仅使用 CSS 及其属性非常轻松地实现它。

实现步骤

首先，让我们创建一个包含 INLINECODE2813b1ab 标签的 div 容器，并在代码中添加一些用于演示的占位线条。将这个 article 标签的 INLINECODE3b3b5b0b 设置为 INLINECODE5a5dc2e8。然后，我们在其中添加一个 INLINECODEe41f9164 div，这就是我们要施展魔法的地方。接着，为当前的 div 标签添加一些基本样式。这个 shimmer 类的位置应保持为相对定位。

最后，让我们为 shimmer 标签添加样式。这主要包含两个关键部分：

• 关键帧 – 在这里，你需要定义变换的路径，也就是微光从哪里移动到哪里。你可以根据对齐需求将其设置为垂直或水平方向。
• 动画– 添加动画的时间跨度，并设置为无限的线性运动，即定义动画的播放方式。

示例：

下面是上述方法的完整实现代码。

HTML

article{
    background: #ddd;
    width: 100%;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}

article .line{
    width: 100%;
    height: 20px;
    background: #bbb;
    margin: 20px 0;
    border-radius: 5px;
}

article .shimmer{
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;

    background: linear-gradient(100deg,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0) 80%);

    animation: shimmer 2s infinite linear;
}

@keyframes shimmer{
    from {
        transform: translateX(-200%);
    }
    to{
        transform: translateX(200%);
    }
}

输出效果：

!image使用 CSS 实现的微光效果