SOLVED Animierte CSS Wetter Symbole? Hilfe!

[foxriver76]

@Flexer

<div class="weather">
  <div class="icon sun-shower">
  <div class="cloud"></div>
  <div class="sun">
    <div class="rays"></div>
  </div>
  <div class="rain"></div>
</div>

<div class="icon thunder-storm">
  <div class="cloud"></div>
  <div class="lightning">
    <div class="bolt"></div>
    <div class="bolt"></div>
  </div>
</div>

<div class="icon cloudy">
  <div class="cloud"></div>
  <div class="cloud"></div>
</div>

<div class="icon flurries">
  <div class="cloud"></div>
  <div class="snow">
    <div class="flake"></div>
    <div class="flake"></div>
  </div>
</div>

<div class="icon sunny">
  <div class="sun">
    <div class="rays"></div>
  </div>
</div>

<div class="icon rainy">
  <div class="cloud"></div>
  <div class="rain"></div>
</div>
</div>

CSS: mache alles vor .icon weg und füge zusätzlich das ein

.weather {
  max-width: 42em;
  padding: 2em;
  margin: 0 auto;
  color: #161616;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  background-color: currentColor;
}

[foxriver76]

@Flexer

<div class="weather">
  <div class="icon sun-shower">
  <div class="cloud"></div>
  <div class="sun">
    <div class="rays"></div>
  </div>
  <div class="rain"></div>
</div>

<div class="icon thunder-storm">
  <div class="cloud"></div>
  <div class="lightning">
    <div class="bolt"></div>
    <div class="bolt"></div>
  </div>
</div>

<div class="icon cloudy">
  <div class="cloud"></div>
  <div class="cloud"></div>
</div>

<div class="icon flurries">
  <div class="cloud"></div>
  <div class="snow">
    <div class="flake"></div>
    <div class="flake"></div>
  </div>
</div>

<div class="icon sunny">
  <div class="sun">
    <div class="rays"></div>
  </div>
</div>

<div class="icon rainy">
  <div class="cloud"></div>
  <div class="rain"></div>
</div>
</div>

CSS: mache alles vor .icon weg und füge zusätzlich das ein

.weather {
  max-width: 42em;
  padding: 2em;
  margin: 0 auto;
  color: #161616;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  background-color: currentColor;
}

[Flexer]

TADAAAAA! Super genial. Vielen lieben Dank für deine Hilfe.

Wie kann man denn CSS am besten sich selbst beibringen. PS bin Laie.

[foxriver76]

@Flexer freut mich. Ich suche meistens das Problem auf Google/stackoverflow, gibt allerdings auch gute deutsche Quellen für html und css.

[Stratos Gkrekidis]

@flexer Hallo kannst du vielleicht dein code für die animierte wettersymbole hochladen.Danke ich finde die super

[nousefor82]

@flexer

Hi,

wie baust du das in deine VIS ein.

Also wie steuerst du dann je nach Datenpunktinhalt (z.B.: daswetter) das richtige icon an?

Gruß

[Stratos Gkrekidis]

@nousefor82 hi das mache ich mit vis bind

[nousefor82]

@stratos-gkrekidis

hi, kannst du das etwas tiefer legen?

[Stratos Gkrekidis]

@nousefor82 mit ein function in vis scripts

[nousefor82]

@stratos-gkrekidis

Kannst du dein Skript hier zur Verfügung stellen? Würde mich interessieren wie das funktioniert.

Danke

[Stratos Gkrekidis]

@nousefor82 lade mal dein code(html css und script) hoch das ich des gleich bei mir teste

[nousefor82]

@stratos-gkrekidis

Ich habe noch garkein Skript

[Stratos Gkrekidis]

@nousefor82 @Flexer @foxriver76
Hier ein gif aus mein vis screensaver mit animierte wetter symbol .