CSS-Animation: So erzielen Sie den Flash-Effekt von Elementen

CSS-Animation: Um den Flash-Effekt von Elementen zu erzielen, sind spezifische Codebeispiele erforderlich.

Im Webdesign können Animationseffekte manchmal eine gute Benutzererfahrung auf die Seite bringen. Der Glitzereffekt ist ein gängiger Animationseffekt, der Elemente auffälliger machen kann. Im Folgenden wird erläutert, wie Sie mithilfe von CSS den Flash-Effekt von Elementen erzielen.

1. Grundlegende Implementierung von Flash

Zuerst müssen wir die Animationseigenschaft von CSS verwenden, um den Flash-Effekt zu erzielen. Der Wert der Animationseigenschaft muss den Animationsnamen, die Animationsausführungszeit, die Animationsverzögerungszeit, die Animationsausführungsmethode und die Animationsausführungszeiten angeben. Für den Flash-Effekt können wir ihn als Endlosschleifen-Animation spezifizieren.

Als nächstes müssen wir den Elementen Stile zuweisen. Da der Glitzereffekt eine Änderung der Farbe des Elements selbst erfordert, können wir die currentColor-Eigenschaft von CSS verwenden, um die aktuelle Textfarbe des Elements als Farbe des Glitzers abzurufen. Wir können den Stil des Elements auch über den Selektor vom Flash-Effekt trennen, sodass der Steuerungsstil und die Animation getrennt werden können.

Hier ist ein einfacher Beispielcode:

/* 为需要实现闪光效果的元素添加样式 */
.shine {
  color: black;
}

/* 定义闪光动画 */
@keyframes shining {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    box-shadow: 0 0 0 1rem transparent;
  }
  100% {
    box-shadow: 0 0 0 0 currentColor;
  }
}

/* 应用闪光动画 */
.shine::before {
  animation: shining 2s infinite;
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
  opacity: 0;
}

Im obigen Stilcode haben wir eine Klasse namens .shine definiert, um das Element zu gestalten. Beim Definieren einer Animation verwenden wir die @keyframes-Regel, um eine Animation mit dem Namen „shining“ zu definieren und 3 Keyframes festzulegen, um den blinkenden Effekt zu erzielen.

Als nächstes haben wir dem Element mit der Pseudoklasse ::before eine absolut positionierte transparente Ebene hinzugefügt und die Glitzereffekt-Animation auf diese Ebene angewendet.

2. Überlegungen zur Kompatibilität

Obwohl der obige Code den Flash-Effekt erzielen kann, ist er nicht mit allen Browsern kompatibel. Laut caniuse.com weisen sowohl die Box-Shadow-Eigenschaft als auch die CurrentColor-Eigenschaft Kompatibilitätsprobleme auf.

Um dieses Problem zu lösen, können wir einige Änderungen am obigen Code vornehmen. Zunächst können wir die Box-Shadow-Eigenschaft durch ein transparentes Hintergrundbild ersetzen. Zweitens können wir die Funktion rgba() von CSS verwenden, um die Farbe und Transparenz des Blitzes zu steuern.

Hier ist der modifizierte Beispielcode:

/* 为需要实现闪光效果的元素添加样式 */
.shine {
  color: black;
}

/* 定义闪光动画 */
@keyframes shining {
  0% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
  50% {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.5);
  }
  100% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
}

/* 应用闪光动画 */
.shine::before {
  animation: shining 2s infinite;
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
}

Im oben modifizierten Code haben wir das Attribut „Hintergrundfarbe“ und das Attribut „Opazität“ anstelle des Attributs „Box-Schatten“ verwendet. Bei der Definition der Flash-Animation verwenden wir die Funktion rgba(), um Farbe und Transparenz festzulegen. Dadurch können wir den Glitzereffekt in allen modernen Browsern umsetzen.

3. Weitere Optimierungen

Als nächstes können wir einige Optimierungen am Code vornehmen. Beispielsweise können wir die Ausführung von Animationseffekten beim ersten Laden der Seite deaktivieren, um die Leistung der Webseite zu verbessern. Wir können auch die CSS-Eigenschaft „will-change“ verwenden, um die Renderleistung während der Animationswiedergabe zu beschleunigen.

Hier ist ein Beispiel für den optimierten Code:

/* 为需要实现闪光效果的元素添加样式 */
.shine {
  color: black;
}

/* 定义闪光动画 */
@keyframes shining {
  0% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
  50% {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.5);
  }
  100% {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0);
  }
}

/* 优化样式 */
.shine::before {
  will-change: opacity, background-color;
}

/* 禁用闪光动画在载入时立即执行 */
.shine:not(:hover)::before {
  animation-play-state: paused;
}

/* 开启闪光动画 */
.shine:hover::before {
  animation-play-state: running;
  animation: shining 2s infinite;
  content: '';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  right: -1rem;
  bottom: -1rem;
  z-index: -1;
}

Im modifizierten Code oben verwenden wir die will-change-Eigenschaft von CSS, um den Browser anzuweisen, die Darstellung des Elements zu optimieren. Um zu verhindern, dass Animationseffekte sofort beim Laden der Seite ausgeführt werden, verwenden wir das Attribut „animation-play-state“, um den anfänglichen Pausenzustand festzulegen. Wenn sich die Maus schließlich über dem Element befindet, verwenden wir die Pseudoklasse :hover, um die Flash-Animation zu aktivieren und den Animationsattributwert auf „Leuchtend“ zu setzen.

Zusammenfassung

Anhand des obigen Beispielcodes können wir sehen, wie CSS verwendet wird, um den Flash-Effekt von Elementen zu erzielen. Dieser Effekt kann dem Webdesign eine gute Benutzererfahrung verleihen. Um diesen Effekt zu erzielen, müssen wir auf Codekompatibilität und Leistung achten. Wenn beim Üben Probleme auftreten, können Sie versuchen, den Code zu optimieren und andere Lösungen auszuprobieren.

Das obige ist der detaillierte Inhalt vonCSS-Animation: So erzielen Sie den Flash-Effekt von Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!