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, Google Chrome und Microsoft Edge (EdgeHTML: 17.17063)
Bausteine
Eine zufällige Auswahl von „Bausteinen” (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.
CSS - Hintergrundbild absolut positionieren
JavaScript - Automatische Weiterleitung nach einigen Sekunden