CSS - Nahtlose unendliche Hintergrundbild-Scroll-Animation

Der Firefox macht da leider Probleme bei der Darstellung!


<style>

  
div.container {
    
width75%;
    
height295px;
    
margin10px auto;
    
backgroundurl("meisterwerke.webp"repeat-x;
    
background-size3698px 295px;
    
border35px solid transparent;
    
border-imageurl("rahmen.webp");
    
border-image-width43px;
    
border-image-outset0px;
    
border-image-slice37;
    
border-image-repeatstretch;
    
border-radius3px;
    
box-shadow0 15px 15px 1px rgba(0000.3),  15px 0 15px 1px rgba(0000.3);
    
animationscroll 60s linear infinite;
  }
  
  @
keyframes scroll {
    
to {
      
background-position-3698px 0;
    }
  }
</
style>

<
div class="container"></div>

Siehe auch: Rahmen für Bilder und Text erstellen und den Bilderrahmen Generator

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<textarea> Mehrzeiliger Eingabebereich

CSS - DiscoLights - Box-Shadow Animation

PHP - Element aus einem Array löschen

JavaScript - HTML-Tags in benannte Zeichen umwandeln

MySQL - Datensatz Wert erhöhen

Eine Homepage macht Arbeit
„Eine Homepage macht Arbeit. Viele Homepages machen Arbeiter.“ Überlegen Sie Sich gut wie viel Zeit Sie in Ihre Homepage investieren wollen. Und ob es sich lohnt eine zweite oder dritte Homepage zu betreiben.