Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS Animation Rohrleitung

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    CSS Animation Rohrleitung

    Guten Morgen,

    ich visualisiere gerade meine WP, dafür würde ich gerne je nach Stellung der 3-Wege-Hähne die "aktiven" Rohrleitungen animiert darstellen.
    Ich stelle mir dafür einen animierten Wechsel zwischen 2 Farben vor der durch die Leitung pulst, so dass die Fließrichtung erkennbar wird.

    Hat jemand eine Idee wie man so was per CSS umsetzen kann?

    Viele Grüße Jochen

    #2
    Wäre interessant

    Kommentar


      #3
      Das müsste sich mit CSS Keyframe-Animationen realisieren lassen:

      Kommentar


        #4
        ... z.B. so:

        Animation.gif

        Code:
        0% {
        background-image:
        linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
        background-size: 15px 1px;
        background-position: 0%;
        background-repeat: repeat;}
        100% {
        background-image:
        linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
        background-size: 15px 1px;
        background-position: 50%;
        background-repeat: repeat;}
        Grüße
        Christian
        __________________

        Kommentar


          #5
          Will bei mir nicht laufen, da blinken nur Linien. Wie hast du das konfiguriert?

          Kommentar


            #6
            Da es ein Background ist, muss das Universalelement auch eine entsprechende Größe haben, dass man den Background sehen kann, also nur Linienbreite reicht nicht.
            Grüße
            Matze

            Kommentar


              #7
              bei mir siehts jetzt so aus :

              chrome-capture.gif
              Hintergrundfarbe z.B.:
              Code:
              repeating-linear-gradient(90deg, red 10px, #d8a0a6 20px, red 40px)
              Animation:
              Code:
              0% {background-position: 0%}
              0% {background-size: 400%}
              100% {background-position: 100%}
              100% {background-size: 400%}

              Kommentar


                #8
                jockele do you have a completely working HTML example?

                Thanks,

                Thomas
                Ich brauche Informationen, eine Meinung bilde ich mir selbst.

                Kommentar


                  #9
                  this is just done with a colour and a css-animation inside edomi. For further information check https://www.mediaevent.de/css/animation.html , with these information I was able to create this animation. I'm not really an expert in html/css

                  Kommentar


                    #10
                    Bis jetzt konntet ihr beide doch deutsch schreiben und lesen? Was ist denn passiert?

                    Все будет хорошо

                    Kommentar


                      #11
                      vento66 mist....das passiert wenn man zu viel auf englischen Seiten unterwegs ist

                      SORRY
                      Ich brauche Informationen, eine Meinung bilde ich mir selbst.

                      Kommentar


                        #12
                        Zitat von jockele Beitrag anzeigen
                        bei mir siehts jetzt so aus :
                        Coole Sache das...danke jockele
                        Den Hintergrund in gestreift funzt noch: Farbe angelegt und den liniar-gradient in die Definition.

                        Hintergrundfarbe z.B.:
                        Code:
                        repeating-linear-gradient(90deg, red 10px, #d8a0a6 20px, red 40px)
                        Zitat von jockele Beitrag anzeigen
                        Animation:

                        0% {background-position: 0%}
                        0% {background-size: 400%}
                        100% {background-position: 100%}
                        100% {background-size: 400%}
                        Nur die Bewegung krieg ich nicht hin. Den Code müsstest doch in die "eigenen CSS-Eigenschaften" des Universalelementes eintragen....oder ?
                        Grüße aus Oberhausen, Frank

                        Kommentar


                          #13
                          nein, Du musst eine neue Animation erzeugen, den Code da rein und dann entsprechend im Universalelement auswählen. Zeit bei mir 10s und Dauer unendlich.
                          Allerdings ruckelt es nach Ablauf der 10s dann mal ganz kurz, weiß nicht ob man das wegbekommt, stört mich aber auch nicht weiter

                          Kommentar


                            #14
                            Zitat von vento66 Beitrag anzeigen
                            Was ist denn passiert?
                            Englische Frage, englische Antwort :-). Hab nicht näher geschaut wer gefragt hat, also auch von mir ein sorry

                            Kommentar


                              #15
                              Zitat von jockele Beitrag anzeigen
                              nein, Du musst eine neue Animation erzeugen, den Code da rein und dann entsprechend im Universalelement auswählen. Zeit bei mir 10s und Dauer unendlich.
                              Allerdings ruckelt es nach Ablauf der 10s dann mal ganz kurz, weiß nicht ob man das wegbekommt, stört mich aber auch nicht weiter
                              Und wieder was gelernt...bis dahin hatte ich es noch nicht geschafft
                              Grüße aus Oberhausen, Frank

                              Kommentar

                              Lädt...
                              X