Menu


Menu Tab

Pages

Showing posts with label CSS3 Basic Image Slider. Show all posts
Showing posts with label CSS3 Basic Image Slider. Show all posts

CSS3 Basic Image Slider

CSS3 Basic Image Slider
Memasang Kode CSS3 Basic Image Slider, kode ini dapat menampilkan Gambar dengan format JPG, GIF dan PNG. gambar yang ada pada kode ini  akan berubah menjadi slide ketika disentuh oleh cursor sekaligus menjadi tombol yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya
Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai
<style type="text/css">
.container {
position:relative; width:200px; height:150px;
}
.container img {
position:absolute; top:0; left:0;
}
.container:hover img {
-webkit-animation-name: slider;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: slider;
animation-timing-function: ease;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@-webkit-keyframes slider {
0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;}
}
@keyframes slider {
0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;}
}
.container img:nth-child(1) {-webkit-animation-delay: 8s; animation-delay: 8s;}
.container img:nth-child(2) {-webkit-animation-delay: 6s; animation-delay: 6s;}
.container img:nth-child(3) {-webkit-animation-delay: 4s; animation-delay: 4s;}
.container img:nth-child(4) {-webkit-animation-delay: 2s; animation-delay: 2s;}
.container img:nth-child(5) {-webkit-animation-delay: 0s; animation-delay: 0s;}

</style>
<div class="container">
<a  href="http://Your Link/">
<img src="http://Link Gambar.jpg" alt="img5">
<img src="http://Link Gambar.jpg" alt="img4">
<img src="http://Link Gambar.jpg" alt="img3">
<img src="http://Link Gambar.jpg" alt="img2">
<img src="http://Link Gambar.jpg" alt="img1">
</div>
Penjelasan :
Ganti Link yang di warnai dengan link sobat
All Sources
Edited by. Myscript2010

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi