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 wiederholenStil (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! |
>>: Über die MariaDB-Datenbank unter Linux
Artikel empfehlen
So verwenden Sie wangEditor in Vue und erhalten durch Echo von Daten den Fokus
Bei der Hintergrundverwaltung von Projekten werde...
Spezifische Schritte zur Verwendung des Vant-Frameworks im WeChat-Applet
Inhaltsverzeichnis 1. Öffnen Sie das Projektverze...
Der IE8-Browser wird vollständig mit Webseitenstandards kompatibel sein
<br />Um zu beweisen, dass sein Engagement f...
SQL-Skriptfunktion zum Schreiben einer PostgreSQL-Datenbank zur Implementierung der Analyse
In diesem Artikel wird hauptsächlich die SQL-Skri...
So erkennen Sie die Dateisystemintegrität basierend auf AIDE in Linux
1. HILFE AIDE (Advanced Intrusion Detection Envir...
Erlernen Sie schnell die Verwendung von Docker zum Erstellen einer Entwicklungsumgebung
Da die Plattform weiter wächst, ist die Forschung...
JavaScript, um einen ausgefallenen Karusselleffekt zu erzielen
In diesem Artikel werden zwei Methoden zur Implem...
Upload-Komponentenfunktion basierend auf React-Dropzone entwickeln (Beispieldemonstration)
Dieses Mal werde ich über die Fähigkeiten zur Ent...
Inspirierende Designbeispiele für glänzendes und schimmerndes Website-Design
Diese Sammlung zeigt eine Reihe herausragender und...
Kreisförmiger Fortschrittsbalken mit CSS implementiert
Ergebnisse erzielen Implementierungscode html <...
Probleme bei der Verwendung von Azure Container Registry zum Speichern von Bildern
Azure Container Registry ist ein verwalteter, ded...
Das mobile Vue-Terminal bestimmt die Richtung, in die der Finger über den Bildschirm gleitet
Das mobile Vue-Terminal bestimmt die Richtung, in...
Grafisches Tutorial zur Installation von Ubuntu 18.04 auf einer virtuellen VMware 15-Maschine
In den letzten Jahren habe ich zwischen Automatis...
Informationen zum Textumbruchproblem bei IE-Labels (LI)
Ich habe lange damit gekämpft und nach einiger Suc...
Verwenden des radialen Farbverlaufs in CSS zum Erzielen eines Karteneffekts
Vor einigen Tagen erhielt eine Kollegin ein Punkt...