html knowhow

Bilder Fader

So sieht´s aus

Quellcode

<html>

<head>
<style type="text/css">
.stage {height: 45vh; overflow: hidden; position: relative; width: 45vw; margin: Auto; margin-bottom: 50px; border: Solid 1px #000000; box-shadow: 0px 0px 10px 3px #999999;}
.actor {animation: kenburns 45s linear infinite; background-size: cover; background-position: 50% 50%; height: 45vh; inset: 0; opacity: 0; position: absolute; scale: 1.5; width: 45vw;}
.actor:nth-child(1) {background-image: url("../Bilder/Life.jpg");}
.actor:nth-child(2) {animation-delay: 10s; background-image: url("../Bilder/Ambi.jpg");}
.actor:nth-child(3) {animation-delay: 20s; background-image: url("../Bilder/Astern.jpg");}
.actor:nth-child(4) {animation-delay: 30s; background-image: url("../Bilder/mbi2.jpg");}
.actor:nth-child(5) {animation-delay: 40s; background-image: url("../Bilder/Andie Macdowell.jpg");}
@keyframes kenburns {
25% {opacity: 1; scale: 1;}
50% {opacity: .8;}
60% {opacity: 0;} }
</style>
</head>

<body>
<div class="stage">
<div class="actor"></div>
<div class="actor"></div>
<div class="actor"></div>
<div class="actor"></div>
<div class="actor"></div>
</div>
</body>

</html>

Kontakt Datenschutz Impressum