Projektpraxis: Erfahrungsaustausch zur Verwendung von CSS-Animationen zum Erstellen cooler Effekte

CSS-Animation ist eine der von vielen Front-End-Entwicklern häufig verwendeten Techniken. Sie kann einige sehr interessante Effekte erzielen, z. B. coole Schaltflächen, reibungslose Seitenladeeffekte, dynamische Seiteninhalte usw. In diesem Artikel werde ich einige Erfahrungen darüber teilen, wie man mit CSS-Animationen coole Effekte erzeugt. Werfen wir einen Blick darauf!

1. Grundlagen der Animation

Bevor wir mit der Erstellung von Animationen beginnen, müssen wir einige Grundlagen kennen. Wenn wir CSS-Animationen verwenden möchten, müssen wir zunächst das Konzept der „Animation“ in CSS verstehen. CSS-Animationen werden über Keyframes implementiert. Keyframes beziehen sich auf bestimmte Zustände innerhalb eines bestimmten Zeitraums und es gibt Übergänge zwischen diesen Zuständen. Beispielsweise können wir die Position eines Elements in der ersten Sekunde auf (0,0) und die Position in der zweiten Sekunde auf (100,100) festlegen. Durch CSS-Animation bewegt sich das Element entlang dieses Pfads.

Zweitens müssen wir die Syntax der CSS-Animation verstehen. Das Folgende ist ein einfaches Beispiel:

@keyframes example {
  0% {transform: translateX(0);}
  50% {transform: translateX(100px);}
  100% { transform: translateX(0);}
}

.example {
  animation: example 1s ease-in-out infinite;
}

Dieses Beispiel gibt den Status der Animation über @keyframes an und wendet die Animation über die Klasse .example auf bestimmte Elemente an. Im obigen Code definieren wir eine Animation namens example, die drei Zustände hat: 0 %, 50 % und 100 %. Bei 0 % ist die Position des Elements die Anfangsposition, d. h. die Verschiebung in X-Achsenrichtung beträgt 0. Bei 50 % wird die Position des Elements um 100 Pixel nach rechts verschoben. Bei 100 % befindet sich das Element wieder in seiner ursprünglichen Position. Schließlich wenden wir über das Animationsattribut eine Animation auf das .example-Element an.

Dies ist nur ein einfaches Beispiel. Natürlich gibt es viele andere Syntax und Eigenschaften, die für CSS-Animationen verwendet werden können, wie z. B. Animationsdauer, Animationsverzögerung, Animations-Timing-Funktion usw. Im eigentlichen Produktionsprozess müssen wir diese Attribute entsprechend den spezifischen Anforderungen flexibel nutzen.

2. Tipps zum Erstellen cooler Effekte

Nachdem wir uns die Grundkenntnisse der CSS-Animation angeeignet haben, können wir beginnen, einige coole Effekte zu erstellen. Im Folgenden werde ich einige praktische Fähigkeiten weitergeben:

2.1 Schaltflächenanimationen erstellen

Schaltflächenanimationen zu erstellen ist ein sehr häufiger Bedarf. Im Folgenden verwenden wir die „Schütteltaste“ als Beispiel, um vorzustellen, wie man mit CSS-Animationen diesen Effekt erzielt.

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

button {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
}

Der obige Code definiert eine Animation namens Shake und wendet sie dann auf eine Schaltfläche an. In dieser Animation realisieren wir den Bewegungseffekt der Schaltfläche über das Transformationsattribut und passen den Beschleunigungseffekt der Animation über die Kubik-Bezier-Funktion an. Nachdem Sie diese Animation auf die Schaltfläche angewendet haben, können Sie den erwarteten „Zitteleffekt“ sehen.

2.2 Ein- und Ausfliegen von Bildern

Dieser Effekt ist ein bisschen wie eine Diashow, bei der jedes Mal ein Bild von oben oder unten einfliegt und dann das vorherige Bild von oben oder unten herausfliegt. Der folgende Code erzielt diesen Effekt:

@keyframes slideIn {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideOut {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

.slide-show {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.slide-show img {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards; 
}

.slide-show .slide1 {
  animation-name: slideIn;
}

.slide-show .slide2 {
  animation-name: slideOut;
}

.slide-show .slide2.active {
  animation-name: slideIn;
}

Im obigen Code definieren wir zwei Animationen mit den Namen slideIn und slideOut und erzielen so den Effekt, dass das Bild ein- und ausfliegt. Wickeln Sie die Bilder dann durch einen Container .slide-show und weisen Sie jedem Bild einen anderen Klassennamen zu (z. B. .slide1, .slide2). Wenn wir Bilder wechseln müssen, müssen wir nur den Klassennamen des aktuellen Bildes in „aktiv“ ändern und dann JavaScript verwenden, um das DOM zu bedienen.

Die beiden oben genannten Beispiele sind nur die Spitze des Eisbergs der CSS-Animation. Ich hoffe, sie können den Lesern helfen, CSS-Animationen besser zu beherrschen und weitere coole Effekte zu erstellen.

Das obige ist der detaillierte Inhalt vonProjektpraxis: Erfahrungsaustausch zur Verwendung von CSS-Animationen zum Erstellen cooler Effekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!