Lluvia ligera · Sensación 17°
HTML + CSSCartes
Carte météo animée
Un petit widget météo où les nuages dérivent et la pluie tombe en arrière-plan, avec les prochaines heures en dessous.
Réglages
16px
1x
Code
<article class="uv-cweather"><div class="sky"><i></i><i></i><b style="--i:0"></b><b style="--i:1"></b><b style="--i:2"></b><b style="--i:3"></b><b style="--i:4"></b><b style="--i:5"></b><b style="--i:6"></b></div><header><span>Madrid</span><small>Maintenant</small></header><strong>18°</strong><p>Pluie légère · Ressenti 17°</p><footer><span>18:00 <b>17°</b></span><span>19:00 <b>16°</b></span><span>20:00 <b>15°</b></span></footer></article>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 Cartes
Où l’utiliser
Un joli détail partout où la météo décide du programme : la fiche destination d'une agence de voyages, le site de réservation d'un gîte, une école de surf ou un lieu de mariage en plein air. Ce widget météo animé affiche la température, le ciel et les prévisions heure par heure, avec nuages et pluie qui bougent derrière.
La scène montre toujours de la pluie : pour un usage réel, reliez-la à une API météo et prévoyez des variantes soleil ou nuages. En simple décor sur une page d'accueil, ralentissez l'animation, sinon la pluie vole la vedette à votre titre.