Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Animierte CSS Wetter Symbole? Hilfe!

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    SOLVED Animierte CSS Wetter Symbole? Hilfe!

    This topic has been deleted. Only users with topic management privileges can see it.
    • foxriver76
      foxriver76 Developer @Flexer last edited by

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

      1 Reply Last reply Reply Quote 0
      • foxriver76
        foxriver76 Developer @Flexer last edited by

        @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;
        }
        
        1 Reply Last reply Reply Quote 0
        • Stratos Gkrekidis
          Stratos Gkrekidis @Flexer last edited by

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

          1 Reply Last reply Reply Quote 0
          • N
            nousefor82 @Flexer last edited by

            @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 1 Reply Last reply Reply Quote 0
            • Stratos Gkrekidis
              Stratos Gkrekidis @nousefor82 last edited by

              @nousefor82 hi das mache ich mit vis bind

              N 1 Reply Last reply Reply Quote 0
              • N
                nousefor82 @Stratos Gkrekidis last edited by

                @stratos-gkrekidis

                hi, kannst du das etwas tiefer legen? 😄

                Stratos Gkrekidis 1 Reply Last reply Reply Quote 0
                • Stratos Gkrekidis
                  Stratos Gkrekidis @nousefor82 last edited by

                  @nousefor82 mit ein function in vis scripts

                  N 1 Reply Last reply Reply Quote 0
                  • N
                    nousefor82 @Stratos Gkrekidis last edited by

                    @stratos-gkrekidis

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

                    Danke

                    Stratos Gkrekidis 1 Reply Last reply Reply Quote 0
                    • Stratos Gkrekidis
                      Stratos Gkrekidis @nousefor82 last edited by

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

                      N 1 Reply Last reply Reply Quote 0
                      • N
                        nousefor82 @Stratos Gkrekidis last edited by

                        @stratos-gkrekidis

                        Ich habe noch garkein Skript😕

                        Stratos Gkrekidis 1 Reply Last reply Reply Quote 0
                        • Stratos Gkrekidis
                          Stratos Gkrekidis @nousefor82 last edited by

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

                          Weather icon.gif

                          1 Reply Last reply Reply Quote 1
                          • First post
                            Last post

                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          747
                          Online

                          31.9k
                          Users

                          80.1k
                          Topics

                          1.3m
                          Posts

                          material css vis
                          4
                          16
                          1678
                          Loading More Posts
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes
                          Reply
                          • Reply as topic
                          Log in to reply
                          Community
                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                          The ioBroker Community 2014-2023
                          logo