Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie CSS, um einen Schimmereffekt zu erzielen
Verwenden Sie CSS, um einen Schimmereffekt zu erzielen
- 王林nach vorne
- 2023-09-11 17:49:021210Durchsuche
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);
}
}
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>
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>
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>
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!