Beispielcode für einen coolen Atemeffekt mit CSS3+JavaScript

Beispielcode für einen coolen Atemeffekt mit CSS3+JavaScript

Ein einfacher cooler Effekt, der mit CSS3-Animation erzielt wird. Der endgültige Effekt ist wie folgt:

Seitenstruktur (index.html):

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <title>Dokument</title>
  <link rel="stylesheet" href="style.css">
</Kopf>
<Text>
  <h1>Entspannen und atmen</h1>
  <div Klasse="Container">
    <div Klasse="Kreis"></div>
    <p id="text"></p>
    <div Klasse="Zeiger-Container">
      <div Klasse="Zeiger"></div>
    </div>
    <div Klasse = "Gradient-Circle"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

script.js:

const container = document.querySelector('.container');
const text = document.querySelector('#text');

Konstante Gesamtzeit = 7500;
const breathTime = (totalTime/5)*2; //Atemzeit beträgt 3s
const holdTime = totalTime/5; //Halteatmungszeit beträgt 1,5 s
console.log(Atemzeit);

breathAnimation(); //Beginnen Sie mit der Ausführung der Funktion breathAnimation function breathAnimation(){
  text.innerHTML = 'Einatmen';
  container.className = 'container grow'; //Füge die Grow-Klasse zum Container hinzu, um den Vergrößerungseffekt zu erzielen setTimeout(function(){
    text.innerHTML = 'Warten';
    setzeTimeout(Funktion(){
      text.innerHTML = 'Ausatmen';
      container.className = 'container shrink'; //Fügen Sie dem Container die Shrink-Klasse hinzu, um einen Schrumpfeffekt zu erzielen},holdTime)
  },Atemzeit)
}

setInterval(breathAnimation,totalTime); //Ausführung wiederholen

Stil (style.css):

*{
  Rand: 0;
  Polsterung: 0;
  Box-Größe: Rahmenbox;
}

Körper{
  Hintergrund: URL('./img/bg.jpg') keine Wiederholung Mitte Mitte /Cover;
  Mindesthöhe: 100vh;
  Schriftfamilie: Arial, Helvetica, serifenlos;
  Farbe: #fff;
  Überlauf: versteckt;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
}
/*Beachten Sie, dass der Rand auf „Auto“ eingestellt ist*/
.Container{
  Position: relativ;
  Breite: 300px;
  Höhe: 300px;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  transformieren: Skalierung(1);
  Rand: automatisch;
}

/*Verwenden Sie als Hintergrund einen konischen Farbverlauf mit einem etwas größeren Seitenverhältnis als .container und setzen Sie den Z-Index auf -2, da es eine weitere Ebene von .circle gibt und die äußerste Ebene Text ist*/
.Gradientenkreis{
  Position: absolut;
  links: -10px;
  oben: -10px;
  Hintergrund: Kegelförmiger Farbverlauf(
    #55b7a4 0%,
    #4ca493 40%,
    #fff 40%,
    #fff 60%,
    #336d62 60%,
    #2a5b52 100%
  );
  Breite: 320px;
  Höhe: 320px;
  Randradius: 50 %;
  z-Index: -2;
}

/z-index ist -1, das ist der schwarze Kreis in der Mitte/
.Kreis{
  Position: absolut;
  links: 0;
  oben: 0;
  Breite: 300px;
  Höhe: 300px;
  Hintergrundfarbe: #010f1c;
  Randradius: 50 %;
  z-Index: -1;
}

/*.pointer-container ist der Container außerhalb des Balls. Seine Höhe ist auf 190 eingestellt, da 150 der Radius und 40 die Top-40 ist. Auf diese Weise dreht er sich um die Mitte des Kreises und wechselt nicht nach innen. Beachten Sie, dass sich der Transform-Origin in der Mitte und unten befindet*/
.Zeiger-Container{
  Position: absolut;
  Breite: 20px;
  Höhe: 190px;
  oben: -40px;
  links: 140px;
  /* Hintergrundfarbe: rot; */
  Transform-Origin: unten Mitte;
  Animation: 7,5 s linear vorwärts unendlich drehen;
}

/*Kleiner Ball*/
.Zeiger{
  Breite: 20px;
  Höhe: 20px;
  Hintergrundfarbe: #fff;
  Randradius: 50 %;
}

/*Lass den Ball im Kreis rotieren*/
@keyframes drehen{
  aus{
    transformieren: drehen (0 Grad);
  }Zu{
    transformieren: drehen (360 Grad);
  }
}
.container.grow{
  Animation: 3 s linear vorwärts wachsen;
}
.container.shrink{
  Animation: 2 s linear vorwärts schrumpfen;
}
@keyframes wachsen{
  aus{
    transformieren: skalieren(1)
  }Zu{
    transformieren: Skalierung (1,2);
  }
}

@keyframes schrumpfen{
  aus{
    transformieren: Skalierung(1.2)
  }Zu{
    transformieren: Skalierung(1);
  }
}

Wenn der Rand von .container nicht auf „auto“ oder einen bestimmten Wert eingestellt ist, tritt der folgende Effekt auf, wobei der Text und der Kreis zusammengedrückt werden:

Gleichzeitig habe ich background-color: red; in .pointer-container hinzugefügt, wodurch es einfacher wird zu verstehen, warum die Höhe von .pointer-container auf 190px eingestellt ist. Wenn der Transform-Origin nicht auf die Mitte unten eingestellt ist, wird er außerdem wie der in der Abbildung markierte Standardpunkt gedreht, was nicht der gewünschte Effekt ist.

Ein weiteres Detail ist, dass ich die Animationszeit von .shrink auf 2 Sekunden eingestellt habe. Laut js sollte die Ausatemzeit eigentlich 3 Sekunden betragen, aber um einen Puffereffekt zwischen Ausatmen und Einatmen zu haben, habe ich sie auf 2 Sekunden eingestellt. Andernfalls gibt es keinen Übergang zwischen Ausatmen und Einatmen, was abrupt und hässlich aussehen würde.

Damit ist dieser Artikel über Beispielcode zum Erzielen eines coolen Atemeffekts mit CSS3+JavaScript abgeschlossen. Weitere relevante Inhalte zum Atemeffekt mit CSS3+JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Eine kurze Analyse, ob der MySQL-Primärschlüssel Zahlen oder UUIDs für schnellere Abfragen verwendet

>>:  Über die MariaDB-Datenbank unter Linux

Artikel empfehlen

Drei Netzwerkmethoden und Prinzipien von virtuellen VMware-Maschinen (Zusammenfassung)

1. Brigde——Bridge: VMnet0 wird standardmäßig verw...

Super einfache Implementierung von Docker zum Erstellen eines persönlichen Blogsystems

Docker installieren Aktualisieren Sie das Yum-Pak...

Detaillierte Erklärung zur Verwendung des <meta>-Tags in HTML

Wenn wir möchten, dass mehr Leute die von uns ers...

Zusammenfassung einiger Probleme, die bei der Integration von E-Charts mit vue.js aufgetreten sind

Vorwort Ich arbeite derzeit an der Datenanalysepl...

Kennen Sie die seltsamen Dinge in Javascript?

Unsere erfahrenen Vorgänger haben zahllose Codes ...

Leerzeichenverarbeitung in HTML/CSS und wie Leerzeichen auf der Seite beibehalten werden

Leerzeichenregeln in HTML In HTML werden mehrere ...

CSS3 Flex-Layout Justify-Content:Space-Between Die letzte Zeile wird linksbündig ausgerichtet

Bei Verwendung des Layouts justify-content:space-...

Nginx implementiert dynamische und statische Trennung Beispielerklärung

Um das Parsen der Website zu beschleunigen, könne...

Mehrere magische Verwendungen des JS ES6 Spread-Operators

Inhaltsverzeichnis 1. Attribute hinzufügen 2. Meh...

Lösung für Workbench, das keine Verbindung zu MySQL auf Alibaba Cloud Server Ubuntu herstellt (getestet)

In den letzten zwei Tagen hatte ich große Problem...

Methode zum Erstellen eines Redis-Clusters basierend auf Docker

Laden Sie das Redis-Image herunter Docker-Pull yy...

Erläuterung des TypeScript-Namespace

Inhaltsverzeichnis 1. Definition und Verwendung 1...

Zusammenfassung mehrerer Situationen, in denen MySQL-Indizes fehlschlagen

1. Indizes speichern keine Nullwerte Genauer gesa...

Beispiele für dl-, dt- und dd-Listenbezeichnungen

Die Tags dd und dt werden für Listen verwendet. N...

Eine kurze Beschreibung der Beziehung zwischen k8s und Docker

In letzter Zeit verwendet das Projekt Kubernetes ...