biasanya dalam membuat slider untuk sebuah web kita membutuhkan javascript atau jquery,
namun seiring semakin majunya perkembangan teknologi design web. sekarang hanya dengna CSS kita sudah dapat membuat slider yang berjalan otomatis
cek it out , langsung source code nya yah
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FADE CSS SLIDER</title>
<style type="text/css">
#slider {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#slider img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
@keyframes sliderFadeInOut {
0% {opacity:1;}
17% {opacity:1;}
25% {opacity:0;}
92% {opacity:0;}
100% {opacity:1;}
}
#slider img:nth-of-type(1) {animation-delay: 6s;}
#slider img:nth-of-type(2) {animation-delay: 4s;}
#slider img:nth-of-type(3) {animation-delay: 2s;}
#slider img:nth-of-type(4) {animation-delay: 0;}
#slider img {
animation-duration: 8s;
animation-iteration-count: infinite;
animation-name: sliderFadeInOut;
animation-timing-function: ease-in-out;
}
</style>
</head>
<body>
<a href="http://intipsweb.blogspot.com">Tips Membuat Slider Fade CSS</a> | Sumber :
<a href="http://intipsweb.blogspot.com">Panduan Belajar Website</a>
<div id="slider">
<img src="slider-fade-intipsweb.jpg" />
<img src="slider-fade-dengan-css.jpg" />
<img src="gambar-slider-fade.jpg" />
<img src="slider-pure-css-intipsweb.jpg" />
</div>
</body>
</html>
nah ingat ada bebera file gambar yang harus kalian download
ini linknya gan , klik disini
0 komentar:
Posting Komentar