CSS - Nahtlose unendliche Hintergrundbild-Scroll-Animation
Der Firefox macht da leider Probleme bei der Darstellung!
<style>
div.container {
width: 75%;
height: 295px;
margin: 10px auto;
background: url("meisterwerke.webp") repeat-x;
background-size: 3698px 295px;
border: 35px solid transparent;
border-image: url("rahmen.webp");
border-image-width: 43px;
border-image-outset: 0px;
border-image-slice: 37;
border-image-repeat: stretch;
border-radius: 3px;
box-shadow: 0 15px 15px 1px rgba(0, 0, 0, 0.3), 15px 0 15px 1px rgba(0, 0, 0, 0.3);
animation: scroll 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.
<header> Kopfbereich
CSS - Nahtlose unendliche Hintergrundbild-Scroll-Animation