使用 CSS 實現微光效果-css教學-PHP中文網

首頁

web前端

css教學

使用 CSS 實現微光效果

王林

Sep 11, 2023 pm 05:49 PM

使用 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 id="Adding-the-i-Shimmer-Effect-i-to-the-HTML-element-using-CSS">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 id="Adding-the-i-Shimmer-Effect-i-to-the-HTML-element-using-CSS">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 id="Adding-the-i-Shimmer-Effect-i-to-the-loading-indicatorx-using-CSS">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 實現微光效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除