Case à cocher qui se remplit d'eau
L'eau monte en vagues dans la case, laisse filer deux bulles puis fait apparaître la coche par-dessus.
Réglages
Code
<label class="uvq02-liq"><input type="checkbox"><span class="bx"><i class="w2"></i><i class="w1"></i><i class="bu"></i><i class="bu"></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Boire 2 litres d'eau</label>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Cases à cocher
Voir tout : Cases à cocherOù l’utiliser
Cette case à cocher se remplit comme un verre. En la cochant, deux couches de vagues qui tournent montent du fond, deux bulles remontent et une coche blanche apparaît quand l'eau se stabilise près du bord. Au survol, le niveau monte un peu pour donner un indice. C'est du HTML et du CSS uniquement, adapté aux suivis d'habitudes, rappels d'hydratation, applis de jardinage et listes bien-être.
La couleur principale est la vague de devant et la secondaire celle de derrière, plus claire : essaie turquoise et eau, ambre et miel ou des tons de fruits rouges pour un jus. Le réglage de vitesse change le rythme des vagues et la montée de l'eau.