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.

<embed>Externe Anwendung

CSS - Die Schriftgröße je nach Fensterbreite automatisch anpassen

PHP - Welcher Tag ist in X-Tagen

JavaScript - Leerstellen löschen

MySQL - DB-Tabelle auslesen und als HTML-Tabelle ausgeben