Hi guys here i am going to share with you a very simple css3 image slider, you can put this code in your slider area to get a slider in your website. You can change the images in css.
<!doctype html>
<html>
<head>
<style>
*
{
margin:auto;
}
.wrapper
{
background-color:#E48939;
width:960px;
height:800px;
}
.slider
{
width:600px;
height:300px;
float:left;
margin:250px 0px 0px 180px;
-webkit-animation:slider 20s infinite;
}
@-webkit-keyframes slider
{
0%{background-image:url(img1.jpg); background-size:600px 300px;}
25%{background-image:url(img2.jpg); background-size:600px 300px;}
75%{background-image:url(img3.jpg); background-size:600px 300px;}
100%{background-image:url(img4.jpg); background-size:600px 300px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="slider">
</div>
</div>
</body>
</html>
0 comments:
Post a Comment