Lluvia ligera · Sensación 17°
HTML + CSSKarten
Animierte Wetterkarte
Ein kleines Wetter-Widget mit ziehenden Wolken und fallendem Regen im Hintergrund, darunter die nächsten Stunden.
Einstellungen
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>Jetzt</small></header><strong>18°</strong><p>Leichter Regen · Gefühlt 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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Karten
Wofür du ihn nutzen kannst
Ein schönes Detail überall dort, wo das Wetter die Pläne bestimmt: auf der Zielseite eines Reisebüros, auf der Buchungsseite eines Landhotels, bei einer Surfschule oder einer Hochzeitslocation im Freien. Das animierte Wetter-Widget zeigt Temperatur, Wetterlage und eine stündliche Vorschau, dahinter ziehen Wolken und Regen in CSS.
Die Szene zeigt immer Regen. Für echten Einsatz verbindest du sie mit einer Wetter-API und baust Varianten für Sonne oder Bewölkung. Als reine Deko auf einer Landingpage lieber langsamer stellen, sonst lenkt der Regen von der Überschrift ab.