Membuat Slide Show HTML + CSS

Pertama kita siapkan folder untuk penempatan project seperti dibawah ini.

kemudian kita isi file index.php dengan kodingan dibawah ini

<!DOCTYPE HTML>
<html>
	<head>
		<link href="css.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<div class="foto-slide">
		<div class="foto-slide-dalam">
			<div id="sliderss">
			    <img class="img1" src="img/1.png" alt="" />
			    <img class="img2" src="img/2.jpg" alt="" />
			    <img class="img3" src="img/3.png" alt="" />
			    <img class="img4" src="img/4.jpg" alt="" />
			    <img class="img4" src="img/5.png" alt="" />
			</div>
		</div>
	</div>
	</body>
<html>

gambar dapat disesuaikan dengan kebutuhan masing-masing, kemudian kita isi file css.css dengan kodingan dibawah ini

.foto-slide{
	float: left;
	height:400px;
	width:100%;
	border:1px solid lightgray;
	background: #fbfbfb;
	transition:box-shadow .2s;
	-moz-transition:box-shadow .2s;
	-o-transition:box-shadow .2s;
	-webkit-transition:box-shadow .2s;
	-ms-transition:box-shadow .2s;
}
.foto-slide:hover{
	box-shadow: 1px 1px 10px .1px lightgray;
	transition:box-shadow .2s;
	-moz-transition:box-shadow .2s;
	-o-transition:box-shadow .2s;
	-webkit-transition:box-shadow .2s;
	-ms-transition:box-shadow .2s;
}
.foto-slide-dalam{
	overflow:hidden;
}
#sliderss{
	position:relative;
}
#sliderss img {
	position: absolute;
}
#sliderss {
	overflow:hidden;
	top:0px;
	left:0px;
	width:100%;
	height:400px;
}
#sliderss img {
	opacity:0;
	-webkit-animation:fade 40s linear infinite; 
	-moz-animation:fade 40s linear infinite;	
}
#sliderss .img2 { 
	-webkit-animation-delay:10s; 
	-moz-animation-delay:10s; 
}
#sliderss .img3 { 
	-webkit-animation-delay:20s; 
	-moz-animation-delay:20s;	
}
#sliderss .img4 { 
	-webkit-animation-delay:30s; 
	-moz-animation-delay:30s;	
}
@-webkit-keyframes fade {
        0% { opacity:0; -webkit-transform:translate(-100px,-100px) scale(1.20); }
        15% { opacity:1; -webkit-transform:translate(-20px,-5px) scale(1.10); }
        30% { opacity:0.5; -webkit-transform:translate(-305px,-20px) scale(1.05); }
        40% { opacity:0; -webkit-transform:translate(-20px,-50px) scale(1.00); }
        100% { opacity:0; }
}
@-moz-keyframes fade {
        0% { opacity:0;-moz-transform:translate(180px,60px) scale(1.80);  }
        15% { opacity:1;-moz-transform:translate(80px,160px) scale(1.60); }
        30% { opacity:0.5;-moz-transform:translate(40px,80px) scale(1.40); }
        40% { opacity:0;-moz-transform:translate(0px,0px) scale(1.00); }
        100% { opacity:0; }
}

dan ini lah hasilnya...

Selamat mencoba... :D




Wednesday, 16 Sep 2015 11:56 PM Arief Setya
Sign In
Sign In to Your Account :)
Sign In or Sign Up
 
Follow Us on Twitter
Find Us on Facebook