HTML + CSSFondos
Luciérnagas
Puntitos de luz que flotan y parpadean sobre el resplandor de un bosque oscuro, tranquilos y algo mágicos.
Ajustes
1x
1x
1
Código
<div class="pt-fireflies"><b></b><i style="left:0.0%;top:79.8%;--z:6.5;--t:11.1s;--dl:-2.6s"></i><i style="left:59.8%;top:99.0%;--z:4.0;--t:8.1s;--dl:-8.8s"></i><i style="left:5.4%;top:92.2%;--z:4.8;--t:11.8s;--dl:-1.7s"></i><i style="left:12.4%;top:23.0%;--z:3.6;--t:6.4s;--dl:-5.7s"></i><i style="left:76.7%;top:50.9%;--z:4.5;--t:10.3s;--dl:-10.8s"></i><i style="left:6.6%;top:94.2%;--z:5.9;--t:11.9s;--dl:-10.2s"></i><i style="left:11.7%;top:15.5%;--z:5.0;--t:14.0s;--dl:-6.4s"></i><i style="left:89.3%;top:39.3%;--z:6.5;--t:12.5s;--dl:-9.4s"></i><i style="left:18.8%;top:68.9%;--z:3.7;--t:12.6s;--dl:-9.5s"></i><i style="left:52.6%;top:37.5%;--z:5.3;--t:11.8s;--dl:-2.3s"></i><i style="left:9.6%;top:17.8%;--z:7.0;--t:12.2s;--dl:-7.6s"></i><i style="left:49.7%;top:33.4%;--z:6.4;--t:6.7s;--dl:-3.8s"></i><i style="left:99.8%;top:65.6%;--z:6.4;--t:11.6s;--dl:-10.1s"></i><i style="left:37.4%;top:65.1%;--z:6.6;--t:13.2s;--dl:-7.7s"></i><i style="left:51.5%;top:20.7%;--z:6.3;--t:7.5s;--dl:-1.7s"></i><i style="left:75.3%;top:79.6%;--z:3.2;--t:13.9s;--dl:-2.4s"></i><i style="left:38.4%;top:68.8%;--z:4.3;--t:9.7s;--dl:-3.3s"></i><i style="left:22.0%;top:54.2%;--z:3.9;--t:13.9s;--dl:-9.2s"></i><i style="left:89.7%;top:51.8%;--z:4.5;--t:12.2s;--dl:-5.8s"></i><i style="left:76.6%;top:70.6%;--z:5.7;--t:11.2s;--dl:-10.1s"></i><i style="left:28.3%;top:85.2%;--z:3.1;--t:12.0s;--dl:-3.2s"></i><i style="left:0.5%;top:87.3%;--z:5.8;--t:7.8s;--dl:-6.6s"></i><i style="left:6.3%;top:75.7%;--z:5.6;--t:11.6s;--dl:-1.7s"></i><i style="left:68.3%;top:45.2%;--z:4.9;--t:6.1s;--dl:-10.3s"></i><i style="left:91.1%;top:80.1%;--z:3.3;--t:11.6s;--dl:-7.9s"></i><i style="left:90.6%;top:74.1%;--z:3.2;--t:12.4s;--dl:-9.4s"></i><i style="left:62.7%;top:73.9%;--z:3.6;--t:8.5s;--dl:-1.4s"></i><i style="left:14.2%;top:57.0%;--z:3.4;--t:8.6s;--dl:-10.6s"></i><i style="left:39.2%;top:20.4%;--z:5.7;--t:6.9s;--dl:-9.1s"></i><i style="left:58.4%;top:98.1%;--z:6.5;--t:8.4s;--dl:-3.6s"></i><i style="left:74.5%;top:30.6%;--z:5.6;--t:7.6s;--dl:-9.9s"></i><i style="left:21.5%;top:71.2%;--z:5.7;--t:6.4s;--dl:-12.1s"></i><i style="left:20.5%;top:15.4%;--z:3.7;--t:8.1s;--dl:-8.3s"></i><i style="left:93.5%;top:96.3%;--z:6.9;--t:13.2s;--dl:-8.6s"></i><i style="left:75.5%;top:65.9%;--z:6.7;--t:9.2s;--dl:-6.9s"></i><i style="left:67.2%;top:41.7%;--z:6.3;--t:9.6s;--dl:-7.9s"></i><i style="left:34.0%;top:57.4%;--z:7.0;--t:10.5s;--dl:-9.6s"></i><i style="left:52.0%;top:38.1%;--z:3.3;--t:8.0s;--dl:-1.1s"></i><i style="left:89.7%;top:68.1%;--z:5.4;--t:7.4s;--dl:-12.2s"></i><i style="left:70.7%;top:98.2%;--z:4.2;--t:7.8s;--dl:-4.5s"></i><i style="left:46.9%;top:78.4%;--z:5.9;--t:6.3s;--dl:-12.3s"></i><i style="left:7.6%;top:39.3%;--z:6.2;--t:7.4s;--dl:-9.7s"></i><i style="left:11.1%;top:49.7%;--z:4.0;--t:8.6s;--dl:-3.6s"></i><i style="left:2.8%;top:84.3%;--z:6.3;--t:10.6s;--dl:-5.6s"></i><i style="left:60.7%;top:17.1%;--z:5.9;--t:9.0s;--dl:-13.7s"></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.
Más en Fondos
Ver todos: FondosDónde usarlo
Las luciérnagas crean un ambiente cálido, algo de ensueño. Pruébalas en la invitación de una boda al aire libre, en la web de un festival de verano o en una app de cuentos infantiles. Cada luz se mueve y se apaga a su ritmo, y nunca se nota el bucle. Un fondo animado de luciérnagas en HTML y CSS.
Los amarillos y verdes cálidos sobre un fondo muy oscuro dan el aspecto más natural; en azul parecen sacadas de un cuento fantástico. Un titular con serifa en crema o blanco roto queda precioso encima sin pelearse con las luces.