HTML + CSSHintergründe

Schillernde Seifenblasen

Schillernde Seifenblasen steigen schaukelnd auf, ihr Farbfilm dreht sich; tippst du eine an, zerplatzt sie in winzige Tropfen.

Einstellungen

1x
1x
1

Code

<div class="pt-uvq16-soap-bubbles"><i style="--x:37.8%;--s:2.82em;--du:14.2;--dl:-0.7;--sp:4.1"><b></b></i><i style="--x:18.1%;--s:6.05em;--du:12.8;--dl:-4.8;--sp:3.9"><b></b></i><i style="--x:47.4%;--s:2.79em;--du:19.9;--dl:-0.9;--sp:3.0"><b></b></i><i style="--x:63.4%;--s:7.76em;--du:14.2;--dl:-8.4;--sp:2.8"><b></b></i><i style="--x:25.1%;--s:2.88em;--du:18.8;--dl:-14.1;--sp:4.1"><b></b></i><i style="--x:66.8%;--s:6.29em;--du:16.2;--dl:-6.4;--sp:2.5"><b></b></i><i style="--x:62.2%;--s:3.42em;--du:13.2;--dl:-5.8;--sp:4.3"><b></b></i><i style="--x:51.3%;--s:4.79em;--du:10.9;--dl:-9.2;--sp:3.4"><b></b></i><i style="--x:68.5%;--s:3.95em;--du:11.3;--dl:-8.9;--sp:3.0"><b></b></i><i style="--x:26.2%;--s:4.39em;--du:19.2;--dl:-8.8;--sp:3.5"><b></b></i><i style="--x:53.5%;--s:5.02em;--du:13.2;--dl:-10.2;--sp:2.7"><b></b></i><i style="--x:89.5%;--s:5.37em;--du:15.6;--dl:-6.6;--sp:4.5"><b></b></i><i style="--x:87.1%;--s:7.80em;--du:12.9;--dl:-0.3;--sp:2.7"><b></b></i><i style="--x:29.2%;--s:7.89em;--du:16.4;--dl:-16.2;--sp:4.2"><b></b></i></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Hintergründe

Alle ansehen: Hintergründe

Wofür du ihn nutzen kannst

Seifenblasen aus übereinanderliegenden CSS-Verläufen. Ein rotierender konischer Verlauf, maskiert auf einen dünnen Rand, ahmt die wechselnden Farben des Seifenfilms nach, ein radialer Glanz ergänzt die Fensterspiegelung, und ein weicher Innenrand sorgt für Volumen. Jede Blase steigt im eigenen Tempo, schwankt und verformt sich leicht wie eine echte im Wind.

Die drei Farben tönen den Film, Pastelltöne wirken am natürlichsten. Die Dichte macht die Blasen größer. Ein winziges Skript lässt eine Blase beim Klicken oder Tippen platzen: Sie bläht sich auf, verblasst und wirft einen Kranz aus Tropfen, bevor sie unten neu aufsteigt. Nett für Kinder, Reinigung und Kosmetik.