使用 CSS 实现微光效果

百变鹏仔 4个月前 (09-19) #CSS

文章标签微光

微光效果是一种动画效果，很多网站都在加载指示器中添加了微光效果。它是网页或 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 元素上的移动线条，这称为闪烁效果。

<html><head>   <style>      .container {         background: grey;         display: flex;         width: 600px;         position: relative;         height: 100px;         box-sizing: border-box;         border-radius: 10px;      }      .box {         height: 90px;         width: 90px;         background: #ddd;         margin: 5px 20px;         border-radius: 8px;      }      .shimmer-div {         width: 30%;         height: 100%;         position: absolute;         top: 0;         left: 0;         background: linear-gradient(120deg,         rgba(255, 255, 0, 0.2) 30%,         rgba(255, 255, 0, 0.2) 50%,         rgba(255, 0, 255, 0.2) 80%);         animation: shimmer 2s infinite linear;      }      @keyframes shimmer {         from {transform: translateX(-230%);}         to {transform: translateX(230%);}      }   </style></head><body>   <h2>Adding the <i> Shimmer Effect </i> to the HTML element using CSS</h2>   <div class = "container">      <div class = "box"> </div>      <div class = "box"> </div>      <div class = "box"> </div>      <div class = "box"> </div>      <div class = "box"> </div>      <div class = "shimmer-div"> </div>   </div></body></html>

示例

在下面的示例中，我们在图像 div 元素上添加了闪烁效果。在这里，我们使用了“mask”CSS 属性而不是“background”CSS 属性。我们添加了线性渐变作为“-webkit-mask”CSS 属性的值。

在微光关键帧中，我们使用左侧的“webkit-maskposition”设置遮罩的位置。在输出中，用户可以观察图像上明暗线条交替的闪烁效果。

<html><head>   <style>      .shimmer-effect {         color: grey;         display: inline-block;         /* adding gradients */         -webkit-mask: linear-gradient(120deg, #000 25%, #0005, #000 75%) right/250% 100%;         /* shimmer effect animation */         animation: shimmer 2.5s infinite;         background-repeat: no-repeat;         width: 500px;      }      @keyframes shimmer {         100% {            /* setting up mask position at left side */            -webkit-mask-position: left         }      }   </style></head><body>   <h2>Adding the <i> Shimmer Effect </i> to the HTML element using CSS</h2>   <img  src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRox9t_onikXnOMmZ-gIWcD0mYq3Z4mAeKO3NeeBWjG&s"  Class = "shimmer-effect" / alt="使用 CSS 实现微光效果" ></body></html>

示例

在下面的示例中，我们在加载指示器上添加了闪烁效果。首先，我们使用 HTML 和 CSS 创建加载指示器。之后，我们使用背景 CSS 属性将线性渐变应用到微光 div 中。

在关键帧中，我们还旋转微光 div，同时沿 x 正方向移动它。在输出中，用户可以观察加载指示器中的闪烁效果有多漂亮。

<html><head>   <style>      .loader {         position: relative;         width: 200px;         height: 200px;         border-radius: 50%;         border: 14px solid grey;      }      .shimmer {         position: absolute;         top: -50%;         left: -50%;         width: 200%;         height: 200%;         background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%);         animation: shimmer 2s infinite;         transform: rotate(90deg);      }      @keyframes shimmer {         0% {transform: translateX(-50%) rotate(45deg);}         100% {transform: translateX(50%) rotate(45deg);}      }   </style></head><body>   <h2>Adding the <i> Shimmer Effect </i> to the loading indicatorx using CSS</h2>   <div class = "loader">      <div class = "shimmer"> </div>   </div></html>

用户学会了使用 CSS 向网页添加闪烁效果。在第一个示例中，我们向 div 元素添加了闪烁效果。在第二个示例中，我们使用“mask”CSS 属性在图像元素上添加闪烁效果。在上一个示例中，我们在加载指示器中添加了闪烁效果。

文章推荐

使用 CSS 实现微光效果

语法

示例

示例

示例

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写