Puerta principal
Cerrada
Mantén pulsado para abrirSe cerrará sola en unos segundos
86 %
HTML + CSSCards
Cerradura que se abre manteniendo
Tarjeta de cerradura inteligente: mantén pulsado, el anillo se llena, el candado salta y se vuelve a cerrar solo.
Ajustes
16px
1x
Código
<article class="uvq07-lck"><header><div><h3>Puerta principal</h3><p class="st"><i></i><span aria-live="polite" data-a="Cerrada" data-b="Abierta">Cerrada</span></p></div><span class="bt"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="16" height="10" rx="2"/><path d="M21 10.5v3"/><rect x="5" y="9" width="10" height="6" rx="1" fill="currentColor" stroke="none"/></svg>86 %</span></header><button type="button" class="hb" aria-label="Mantén pulsado para abrir"><svg class="rg" viewBox="0 0 100 100" aria-hidden="true"><circle class="tr" cx="50" cy="50" r="46"/><circle class="pr" cx="50" cy="50" r="46" pathLength="1"/></svg><svg class="lk" viewBox="0 0 24 24" aria-hidden="true"><path class="sh" d="M8 11V7.5a4 4 0 0 1 8 0V11"/><rect x="5" y="11" width="14" height="10" rx="2.5"/><circle cx="12" cy="16" r="1.3"/></svg></button><p class="hn"><span class="h1">Mantén pulsado para abrir</span><span class="h2">Se cerrará sola en unos segundos</span></p><footer>Última apertura: Marta, 18:04</footer></article>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 Cards
Ver todos: CardsDónde usarlo
Abrir una puerta debería pedir un gesto deliberado, y mantener pulsado es la respuesta clásica. Un anillo alrededor del candado se llena mientras sostienes con el puntero, Espacio o Intro; si sueltas antes, retrocede, y al completarlo el arco salta con un muelle y el anillo se vacía como temporizador de cierre. Sirve para domótica, control de accesos y cualquier acción que pida confirmación.
El color principal es el anillo de progreso y el estado abierto; el secundario, la tarjeta grafito. Cambia el tiempo de pulsación en la transición CSS y la espera de cierre en el script.