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
CSS erreicht hochadaptiven Vollbildmodus
Beim Schreiben meiner eigenen Demo möchte ich dis...
Ein kurzes Verständnis der MySQL SELECT-Ausführungsreihenfolge
Die vollständige Syntax der SELECT-Anweisung laut...
Nutzungs- und Leistungsoptimierungstechniken für die Aggregatfunktion „count“ in MySQL
Die Umgebung dieses Artikels ist Windows 10 und d...
js, um die vollständigen Schritte der Konvertierung von Chinesisch nach Pinyin durchzuführen
Ich habe js verwendet, um ein Paket zur Konvertie...
Analyse und Lösung der Ursache für den Verlust des Webseitenstils durch das automatische Ausfüllen von Formularen durch den Browser
Vom Backend zum Frontend: was für eine Tragödie. A...
Installieren Sie drei oder mehr Tomcats unter einem Linux-System (detaillierte Schritte)
Wenn Sie mehrere Tomcats installieren möchten, mü...
Dropdown-Menü implementiert durch HTML+CSS3+JS
Ergebnisse erzielen html <div Klasse="Con...
Detaillierte Erläuterung der Installation und Verwendung von Crontabs für geplante Linux-Aufgaben
Crontab installieren yum install crontabs CentOS ...
Verwenden Sie CSS, um 3D-konvexe und konkave Effekte auf Bildern zu erzielen (konvex aus dem Rahmen heraus oder konkav im Rahmen).
Ⅰ. Problembeschreibung: Verwenden Sie CSS, um kon...
Design-Referenz: Erfolgsbeispiel für die Erstellung einer WordPress-Website
Jede dieser 16 Sites ist eine sorgfältige Lektüre ...
So löschen Sie schwebenden Beispielcode in CSS
Überblick Das Rahmendiagramm dieses Artikels ist ...
Probleme bei der Konfiguration von https-Server und Reverse-Proxy mit Nginx unter Windows
Anforderungslogik Frontend --> Nginx über http...
Detaillierte Analyse des Explain-Ausführungsplans in MySQL
Vorwort Das Schreiben effizienter SQL-Anweisungen...
HTML+CSS zur Implementierung des Beispielcodes des Dropdown-Menüs der Navigationsleiste
Wirkung Die Bilder im Code können selbst geändert...
Analyse und Lösung des Problems, dass die MySQL-Instanz nicht gestartet werden kann
Inhaltsverzeichnis Vorwort Szenarioanalyse Zusamm...