Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS Animation Rohrleitung

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

  • jockele
    antwortet
    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

    Einen Kommentar schreiben:


  • jockele
    antwortet
    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

    Einen Kommentar schreiben:


  • oefchen
    antwortet
    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 ?

    Einen Kommentar schreiben:


  • thn80
    antwortet
    vento66 mist....das passiert wenn man zu viel auf englischen Seiten unterwegs ist

    SORRY

    Einen Kommentar schreiben:


  • vento66
    antwortet
    Bis jetzt konntet ihr beide doch deutsch schreiben und lesen? Was ist denn passiert?

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

    Einen Kommentar schreiben:


  • jockele
    antwortet
    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

    Einen Kommentar schreiben:


  • thn80
    antwortet
    jockele do you have a completely working HTML example?

    Thanks,

    Thomas

    Einen Kommentar schreiben:


  • jockele
    antwortet
    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%}

    Einen Kommentar schreiben:


  • fisch3009
    antwortet
    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.

    Einen Kommentar schreiben:


  • neci
    antwortet
    Will bei mir nicht laufen, da blinken nur Linien. Wie hast du das konfiguriert?

    Einen Kommentar schreiben:


  • trax
    antwortet
    ... 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;}

    Einen Kommentar schreiben:


  • panzaeron
    antwortet
    Das müsste sich mit CSS Keyframe-Animationen realisieren lassen:

    Einen Kommentar schreiben:


  • uzi10
    antwortet
    Wäre interessant

    Einen Kommentar schreiben:


  • jockele
    hat ein Thema erstellt CSS Animation Rohrleitung.

    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
Lädt...
X