Verwenden Sie CSS, um einen Schimmereffekt zu erzielen-CSS-Tutorial-php.cn

Verwenden Sie CSS, um einen Schimmereffekt zu erzielen

王林

Freigeben： 2023-09-11 17:49:02

nach vorne

1199 Leute haben es durchsucht

使用 CSS 实现微光效果

Glimmer-Effekt ist ein animierter Effekt, den viele Websites zu ihren Ladeanzeigen hinzufügen. Es handelt sich um die Illusion einer Bewegung innerhalb einer Webseite oder eines HTML-Elements.

Wir können Flackereffekte mithilfe verschiedener CSS-Eigenschaften wie lineare Verläufe, Keyframes, Animationen, Hintergrundposition, Transformationen usw. erstellen. Grundsätzlich fügt der Schimmereffekt abwechselnd bewegte helle und dunkle Linien hinzu.

Hier lernen wir, wie man mit CSS einen Schimmereffekt erzeugt.

Grammatik

Benutzer können mithilfe von CSS Schimmereffekte gemäß der folgenden Syntax erstellen.

.shimmer-div {
   background: linear-gradient
   animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
   from {
      transform: translateX(percentage);
   }
   to {
      transform: translateX(percentage);
   }
}

Nach dem Login kopieren

In der obigen Syntax haben wir einen linearen Farbverlauf als Hintergrund im div-Element hinzugefügt und eine Animation mithilfe von Schimmer-Keyframes hinzugefügt.

Wir verschieben das Div im Schimmer-Keyframe von links nach rechts, um den Schimmereffekt zu erzeugen.

Beispiel

Im folgenden Beispiel haben wir ein Container-Div als übergeordnetes Div. Innerhalb des übergeordneten div-Elements haben wir mehrere Box-Elemente und divs mit dem Klassennamen „shimmer“ hinzugefügt. Zusätzlich haben wir etwas CSS auf das div-Element angewendet.

In CSS animieren wir das Shimmer-Div-Element mit einem linearen Farbverlauf im Hintergrund, in der Breite und in den Shimmer-Keyframes. Wir verwenden die CSS-Transformationseigenschaft im Shimmer-Keyframe, um das Shimmer-Div-Element von -230 % auf 230 % zu verschieben.

In der Ausgabe kann der Benutzer sich bewegende Linien auf dem übergeordneten div-Element beobachten, was als Flimmereffekt bezeichnet wird.

<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>

Nach dem Login kopieren

Beispiel

Im folgenden Beispiel haben wir einem Bild-Div-Element einen Blinkeffekt hinzugefügt. Hier haben wir die CSS-Eigenschaft „Maske“ anstelle der CSS-Eigenschaft „Hintergrund“ verwendet. Wir haben einen linearen Farbverlauf als Wert der CSS-Eigenschaft „-webkit-mask“ hinzugefügt.

Im Schimmer-Keyframe verwenden wir links „webkit-maskposition“, um die Position der Maske festzulegen. In der Ausgabe können Benutzer den Flackereffekt abwechselnd heller und dunkler Linien auf dem Bild beobachten.

<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>

Nach dem Login kopieren

Beispiel

Im folgenden Beispiel haben wir der Ladeanzeige einen Blinkeffekt hinzugefügt. Zuerst erstellen wir mithilfe von HTML und CSS eine Ladeanzeige. Danach wenden wir mithilfe der CSS-Eigenschaft „Hintergrund“ einen linearen Farbverlauf auf das Schimmer-Div an.

Im Keyframe drehen wir auch das Schimmer-Div, während wir es in die positive x-Richtung bewegen. In der Ausgabe kann der Nutzer beobachten, wie schön der Blinkeffekt in der Ladeanzeige ist.

<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>

Nach dem Login kopieren

Benutzer haben gelernt, CSS zu verwenden, um Webseiten einen Flimmereffekt hinzuzufügen. Im ersten Beispiel haben wir einem div-Element einen Blinkeffekt hinzugefügt. Im zweiten Beispiel verwenden wir die CSS-Eigenschaft „mask“, um einem Bildelement einen Flimmereffekt hinzuzufügen. Im vorherigen Beispiel haben wir der Ladeanzeige einen Blinkeffekt hinzugefügt.

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um einen Schimmereffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!