CSS - Animierte Box mit Keyframes
<style>
.animatedBox {
width: 300px;
height: 200px;
text-align: center;
font: 24px sans-serif;
color: white;
text-shadow: 0px 0px 12px black;
border: 1px Solid Black;
background-image: url('bild.png');
background-position: bottom left;
animation: moveBg 10s ease 1s infinite alternate;
}
@keyframes moveBg {
100% {
background-position: bottom right;
}
}
</style>
<div class="animatedBox">Animierte Box</div>
Unterstützung: Mozilla Firefox und Microsoft Edge (Chromium).
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Bausteinen (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.
CSS - Uhrzeitanzeige mal anders!
PHP - Zeitgesteuerte Wechselbilder im Monatsrythmus