微光效果是一种动画效果，很多网站都在加载指示器中添加了微光效果。它是网页或 HTML 元素中运动的错觉。
我们可以使用各种 CSS 属性（例如线性渐变、关键帧、动画、背景位置、变换等）创建闪烁效果。基本上，闪烁效果添加了交替的明暗移动线。
在这里，我们将学习使用 CSS 创建微光效果。
语法
用户可以按照以下语法使用 CSS 创建微光效果。
立即学习“前端免费学习笔记（深入）”；
.shimmer-div {
background: linear-gradient
animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
from {
transform: translateX(percentage);
}
to {
transform: translateX(percentage);
}
}
在上面的语法中，我们在 div 元素中添加了线性渐变作为背景，并添加了使用微光关键帧的动画。
我们在微光关键帧中从左向右移动 div 以创建微光效果。
示例
在下面的示例中，我们有一个容器 div 作为父 div。在父 div 元素内，我们添加了多个 box 元素和带有“shimmer”类名的 div。此外，我们还在 div 元素上应用了一些 CSS。
在 CSS 中，我们将背景、宽度和微光关键帧中的线性渐变设置为微光 div 元素的动画。我们使用微光关键帧中的 CSS 变换属性将微光 div 元素从 - 230% 移动到 230%。
在输出中，用户可以观察到父 div 元素上的移动线条，这称为闪烁效果。
Adding the Shimmer Effect to the HTML element using CSS
示例
在下面的示例中，我们在图像 div 元素上添加了闪烁效果。在这里，我们使用了“mask”CSS 属性而不是“background”CSS 属性。我们添加了线性渐变作为“-webkit-mask”CSS 属性的值。
在微光关键帧中，我们使用左侧的“webkit-maskposition”设置遮罩的位置。在输出中，用户可以观察图像上明暗线条交替的闪烁效果。
Adding the Shimmer Effect to the HTML element using CSS
示例
在下面的示例中，我们在加载指示器上添加了闪烁效果。首先，我们使用 HTML 和 CSS 创建加载指示器。之后，我们使用背景 CSS 属性将线性渐变应用到微光 div 中。
在关键帧中，我们还旋转微光 div，同时沿 x 正方向移动它。在输出中，用户可以观察加载指示器中的闪烁效果有多漂亮。
Adding the Shimmer Effect to the loading indicatorx using CSS
用户学会了使用 CSS 向网页添加闪烁效果。在第一个示例中，我们向 div 元素添加了闪烁效果。在第二个示例中，我们使用“mask”CSS 属性在图像元素上添加闪烁效果。在上一个示例中，我们在加载指示器中添加了闪烁效果。
