Menu


Menu Tab

Pages

CSS3 Advanced slider

CSS3 Advanced slider
Memasang Kode CSS3 Advanced slider, kode ini dapat menampilkan Gambar dengan format JPG, GIF dan PNG. gambar yang ada pada kode ini  akan berubah menjadi slide melayang 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; opacity: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:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}
20% {opacity:1;-webkit-transform: rotate(0) scale(1) skew(0deg,0deg);}
30% {opacity:0;-webkit-transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
100% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}
}
@keyframes slider {
0% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}
20% {opacity:1;transform: rotate(0) scale(1) skew(0deg,0deg);}
30% {opacity:0;transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
100% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}
}
.container img:nth-of-type(1) {-webkit-animation-delay: 8s;animation-delay: 8s;}
.container img:nth-of-type(2) {-webkit-animation-delay: 6s;animation-delay: 6s;}
.container img:nth-of-type(3) {-webkit-animation-delay: 4s;animation-delay: 4s;}
.container img:nth-of-type(4) {-webkit-animation-delay: 2s;animation-delay: 2s;}
.container img:nth-of-type(5) {-webkit-animation-delay: 0s;animation-delay: 0s;}

.container .hovertext {
position: absolute; top:60px; left:30px;
font-size:1.5em; color: rgba(255,255,255,1);
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
.container:hover .hovertext {
top:20px; color: rgba(255,255,255,0);
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
</style>
<div class="container"> 
<a href="http://Your Link/">
<img alt="img5" src="http://Link Gambar" />
<img alt="img4" src="
http://Link Gambar" />
<img alt="img3" src="
http://Link Gambar" />
<img alt="img2" src="
http://Link Gambar" />
<img alt="img1" src="
http://Link Gambar" />
<div class="hovertext">

Hover here</div>
</div>
Penjelasan :
Ganti Link yang di warnai dengan link sobat
Sumber by. Jhon Star
Edited by. Myscript2010

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi