Buat folder untuk menyimpan file dengan nama sesuka kalian setelah itu buat folder di dalam dengan nama css
Buat file css dengan script berikut , dan simpan dengan nama style.css
* { margin: 0; padding: 0; }buat halaman index ,dan simpan dengan nama index.html
html { background: #D9D3CF; }
body { color: #fd4903 }
#page-wrap { width: 800px; margin: 60px auto; position: relative; }
h1, h2 { font: bold 56px Helvetica, Arial, Sans-Serif; letter-spacing: -2px; }
h1 { margin: 0 0 20px 0; }
h2 { margin: 50px 0 20px 0; font-size: 24px; letter-spacing: -1px; color: #2c2424; }
<!DOCtYPE htMl>Buat lagi folder dengan nama images , dan masukan 4 gambar berbeda beri nama banner-1 , banner-2 ,rollover-2 , rollover-1
<html>
<head>
<meta charset="utf-8">
<title>Image Wipes - devclod</title>
<link rel='stylesheet' href='css/style.css'>
<style>
#banner {
width: 800px;
height: 300px;
position: relative;
border: 8px solid #eee;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}
#banner div {
position: absolute;
}
#banner div:nth-child(2) {
-webkit-animation: wipe 6s infinite;
-webkit-animation-delay: 3s;
-webkit-animation-direction: alternate;
-webkit-mask-size: 2000px 2000px;
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom,
color-stop(0.00, rgba(0,0,0,1)),
color-stop(0.45, rgba(0,0,0,1)),
color-stop(0.50, rgba(0,0,0,0)),
color-stop(0.55, rgba(0,0,0,0)),
color-stop(1.00, rgba(0,0,0,0)));
}
@-webkit-keyframes wipe {
0% {
-webkit-mask-position: 0 0;
}
100% {
-webkit-mask-position: -1200px -1200px;
}
}
#rollover {
width: 250px;
height: 250px;
position: relative;
border: 8px solid #eee;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.75);
}
#rollover div {
position: absolute;
top: 0;
left: 0;
}
#rollover div:nth-child(2) {
-webkit-transition: -webkit-mask-position 1s ease;
-webkit-mask-size: 600px 600px;
-webkit-mask-image: -webkit-gradient(linear, left top, right top,
color-stop(0.00, rgba(0,0,0,1)),
color-stop(0.35, rgba(0,0,0,1)),
color-stop(0.50, rgba(0,0,0,0)),
color-stop(0.75, rgba(0,0,0,0)),
color-stop(1.00, rgba(0,0,0,0)));
}
#rollover div:nth-child(2):hover {
-webkit-mask-position: -300px -300px;
}
</style>
</head>
<body>
<div id="page-wrap">
<h1>WebKit Image Wipes</h1>
<h2>Alernating, Automatic, Angled</h2>
<div id="banner">
<div><img src="images/banner-1.jpg" alt="Skyline 1"></div>
<div><img src="images/banner-2.jpg" alt="Skyline 2"></div>
</div>
<h2>Rollover, Straight</h2>
<div id="rollover">
<div><img src="images/rollover-2.jpg" alt="Smile"></div>
<div><img src="images/rollover-1.jpg" alt="Sleep"></div>
</div>
<h2>Photos</h2>
http://www.flickr.com/photos/joiseyshowaa/2720195951/<br>
http://www.flickr.com/photos/livenature/175872009/<br>
http://www.flickr.com/photos/romainguy/230462559/
</div>
</body>
</html>
Dan yang terahir kalian coba jalankan di browser kalian dan lihat hasilnya.
0 comments: