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
Alle ansehen: KartenWofü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.