HTML + CSSFondos
Radar
Un barrido que gira sobre una rejilla circular y enciende los puntos a su paso.
Ajustes
1x
1x
1
Código
<div class="pt-radar"><b></b><i></i><i style="left:calc(50% + 0.0cqmin);top:calc(50% + -16.4cqmin);--a:0.000"></i><i style="left:calc(50% + -5.8cqmin);top:calc(50% + 15.1cqmin);--a:0.558"></i><i style="left:calc(50% + 9.0cqmin);top:calc(50% + 3.1cqmin);--a:0.302"></i><i style="left:calc(50% + -10.5cqmin);top:calc(50% + 17.2cqmin);--a:0.587"></i><i style="left:calc(50% + 17.4cqmin);top:calc(50% + 14.6cqmin);--a:0.361"></i><i style="left:calc(50% + 15.6cqmin);top:calc(50% + -23.8cqmin);--a:0.093"></i><i style="left:calc(50% + -38.7cqmin);top:calc(50% + 11.8cqmin);--a:0.703"></i><i style="left:calc(50% + -4.7cqmin);top:calc(50% + -11.9cqmin);--a:0.940"></i><i style="left:calc(50% + -12.1cqmin);top:calc(50% + -19.9cqmin);--a:0.913"></i><i style="left:calc(50% + 17.0cqmin);top:calc(50% + -27.5cqmin);--a:0.088"></i><i style="left:calc(50% + -8.5cqmin);top:calc(50% + -34.8cqmin);--a:0.962"></i><i style="left:calc(50% + 8.8cqmin);top:calc(50% + 11.2cqmin);--a:0.394"></i><i style="left:calc(50% + -10.6cqmin);top:calc(50% + 42.0cqmin);--a:0.539"></i><i style="left:calc(50% + 15.3cqmin);top:calc(50% + -39.9cqmin);--a:0.058"></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
Dónde usarlo
El radar pega con todo lo que sea buscar, rastrear o escanear: la espera de una app de empleo, el hero de una empresa de seguridad, el seguimiento de un pedido o la landing de un juego de geolocalización. Los puntos se encienden al pasar el haz y se apagan despacio. Un fondo de radar animado en CSS.
Coloca tu mensaje dentro de los anillos y no encima de la zona más cargada del barrido. El verde clásico suena militar o retro; con el color de tu marca se convierte en algo mucho más de producto.