CSS-Puls- und Herzschlag-Animationsgenerator
Puls-, Herzschlag- oder Glüh-Ring-CSS-Animationen erstellen und kopieren
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Mit diesem Tool erstellen Sie eine CSS-Puls-Animation für Buttons, Icons oder Badges, ohne Keyframes von Hand zu schreiben. Wählen Sie aus drei Vorlagen — Herzschlag, Standard-Puls oder Glüh-Ring — und passen Sie Skalierung, Geschwindigkeit und Timing-Funktion bei laufender Vorschau an, um den fertigen CSS-Code mit einem Klick zu kopieren. Alles läuft direkt im Browser, es werden keine Daten an einen Server gesendet.
Anleitung
- Wählen Sie eine Vorlage: Herzschlag, Standard-Puls oder Glüh-Ring.
- Stellen Sie mit den Reglern für Skalierung und Geschwindigkeit ein, wie stark und wie schnell die Animation pulsiert.
- Wählen Sie eine Timing-Funktion wie ease, linear oder cubic-bezier, um die Bewegung zu verfeinern.
- Prüfen Sie die Live-Vorschau und klicken Sie auf 'CSS kopieren', um den generierten @keyframes-Code zu erhalten.
FAQ
- Kann ich den generierten CSS-Code direkt in mein Projekt einfügen?
- Ja — kopieren Sie den @keyframes-Block und die Klasse .pulsing-element und wenden Sie diese Klasse auf das gewünschte Element an.
- Warum lässt sich die Skalierung beim Glüh-Ring nicht anpassen?
- Der Glüh-Ring basiert auf einem sich ausbreitenden box-shadow statt auf Skalierung, daher wirken hier nur Geschwindigkeit und Timing-Funktion.
- Wie erzeugt die Herzschlag-Vorlage das Gefühl eines doppelten Schlags?
- Sie setzt unterschiedliche scale-Werte bei 0 %, 14 %, 28 %, 42 %, 70 % und 100 %, wodurch ein kurzer kleiner und ein größerer Schlag entstehen, ähnlich einem echten Herzschlag.