HTML + CSSFondos

Pompas de jabón

Pompas iridiscentes que suben meciéndose con una película de colores que gira; al tocarlas estallan en gotitas.

Ajustes

1x
1x
1

Código

<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 para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Fondos

Ver todos: Fondos

Dónde usarlo

Pompas de jabón hechas con degradados CSS superpuestos. Un degradado cónico que gira, recortado a un borde fino, imita los colores cambiantes de la película de jabón, un brillo radial añade el reflejo de la ventana y un borde interior suave da volumen. Cada pompa sube a su ritmo mientras se balancea y se aplasta un poco, como una de verdad llevada por la brisa.

Los tres colores tiñen la película, así que los tonos pastel quedan más naturales. La densidad hace las pompas más grandes. Un script mínimo revienta una pompa al hacer clic o tocarla: se hincha, se desvanece y suelta un anillo de gotitas antes de volver a subir desde abajo. Encantador para niños, limpieza y cosmética.