使用 CSS 实现闪光效果

cssweb developmentfront end technology更新于 2024/4/16 6:36:17

闪光效果是一种动画效果，许多网站在加载指示器中添加了闪光效果。它使网页或 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 元素的动画。我们在闪光关键帧中使用 transform 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 元素上添加了闪光效果。这里，我们使用了 CSS 属性"mask"而不是 CSS 属性"background"。我们将线性渐变添加为 CSS 属性"-webkit-mask"的值。

在闪光关键帧中，我们使用左侧的"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" />
</body>
</html>

示例

在下面的示例中，我们在加载指示器上添加了闪烁效果。首先，我们使用 HTML 和 CSS 创建了加载指示器。然后，我们使用 background 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 元素添加了闪光效果。在第二个示例中，我们使用 CSS 属性"mask"为图像元素添加了闪光效果。在最后一个示例中，我们在加载指示器中添加了闪光效果。