Fadende Bildershow | |
Der Rahmen bewegt sich automatisch ums Bild. | |
| 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 > <ul class="slideshow"> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> </body> </html> |
Rollierende Bildershow | |
Der Rahmen bewegt sich automatisch ums Bild. | |
| 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 | |
