CSS - Diashow mit Keyframes
<style>
div#meinDiv {
width: 600px;
height: 400px;
box-shadow: 0px 0px 7px 6px #bbbbbb;
border: Solid 1px #909090;
background-image: url("10.jpg");
background-size: cover;
animation: animationName 20s 2s infinite;
}
@keyframes animationName {
10% {
background-image: url("1.jpg");
}
20% {
background-image: url("2.jpg");
}
30% {
background-image: url("3.jpg");
}
40% {
background-image: url("4.jpg");
}
50% {
background-image: url("5.jpg");
}
60% {
background-image: url("6.jpg");
}
70% {
background-image: url("7.jpg");
}
80% {
background-image: url("8.jpg");
}
90% {
background-image: url("9.jpg");
}
100% {
background-image: url("10.jpg");
}
}
/* Für kleine Geräte anpassen */
@media screen and (max-width: 48rem) {
div#meinDiv {
width: 370px;
height: 250px;
}
}
</style>
<div id="meinDiv"></div>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<summary> Überschrift
CSS - Bevorzugtes Farbschema darstellen (Hell.- / Dunkelmodus für Webseiten)
PHP - Wochentage zählen und als Variabeln zurückgeben
JavaScript - Automatische Weiterleitung nach einigen Sekunden