Thursday, February 20

Simple Image Crossfade Slideshow – CSS Animation

Before starting you have to make one folder and put four images in this folder which you want to the slideshow. If you are using the slider on your website, it means your website is the ornament of the diamond. Slide makes the website more attractive and beautiful. Users or visitors can find the content immediately that you include your website through sliding. If you are a beginner or in the learning processing of web development this tutorial will make help to learn effectively. This tutorial I am going to show you slideshow using HTML and CSS only. Please copy the given source code and paste into your text editor and run it in your browser. If you want modify it, you can

 

HTML

<!DOCTYPE html>
<html>
<head>
<title> Simple Image Crossfade Slideshow - CSS Animation</title>
<link rel ="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
    <ul>
  <li><img width="800" height="400" src="img-1.jpg"></li>
  <li><img width="800" height="400"  src="img-2.jpg"></li>
  <li><img width="800" height="400" src="img-3.jpg"></li>
  <li><img width="800" height="400" src="img-4.jpg"></li>
</ul>
    </div>
    </body>
</html>

CSS

body {
 background: gray; 
}
.wrap{
  width: 800px;
  margin: auto;
  margin-top: 100px;
 
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
li {
    position: absolute;
}
img{
  border:5px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 5px 0 hsla(0,0%,30%, .3);
}
li:nth-child(4) {
  animation: xfade 16s 0s infinite;
}
li:nth-child(3) {
  animation: xfade 16s 4s infinite;
}
li:nth-child(2) {
  animation: xfade 16s 8s infinite;
}
li:nth-child(1) {
  animation: xfade 16s 12s infinite;
}
@keyframes xfade{
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *