diedVIPs

html knowhow

Banner Rotation











Rollierende Bildershow

So sieht´s aus
Quellcode
<html>
<head>

<style type="text/css">
.slideshow {list-style-type: none;}
.slideshow,
.slideshow:after { position: absolute; width: 100%; height: 70%; left: 0px; z-index: 0; }
.slideshow li span { position: absolute; width: 100%; height: 70%; top: 0px; left: 0px; background-size: 100%;
background-position: 50% 50%; background-repeat: no-repeat; opacity: 0; z-index: 0; animation: imageAnimation 30s linear infinite 0s; }
.slideshow li:nth-child(1) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-Dinner.jpg"); }
.slideshow li:nth-child(2) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-MSGS.jpg"); animation-delay: 6s; }
.slideshow li:nth-child(3) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-HBart.jpg"); animation-delay: 12s; }
.slideshow li:nth-child(4) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-Hdil.jpg"); animation-delay: 18s; }
.slideshow li:nth-child(5) span { background-image: url("http://saleorbuy.lmfd.de/Bilder/werbung/B-Ovoice.jpg"); animation-delay: 24s; }
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }}
.no-cssanimations .cb-slideshow li span {opacity: 1;}
</style>
</head>

<body >
<div id="captioned-gallery">
<figure class="slider">
<figure><a href="http://todayslunch.de"><img src="../../bilder/Werbung/B-Dinner.jpg" /></a></figure>
<figure><a href="http://hbart.de"><img src="../../bilder/Werbung/B-hbart.jpg" /></a></figure>
<figure><a href="http://meinsolargarten.de"><img src="../../bilder/Werbung/B-msgs.jpg" /></a></figure>
<figure><a href="http://ovoice.de"><img src="../../bilder/Werbung/B-Ovoice.jpg" /></a></figure>
<figure><a href="http://htmlknowhow.de"><img src="../../bilder/Werbung/B-hkh.jpg" /></a></figure>
</figure>
</div>

</body>

</html>










Kontakt    Datenschutz   Impressum