Creative Sliding Animation Card Using HTML and CSS only

Sliding Animation Card Using HTML and CSS only

Hey friends, today in this blog you’ll learn how to create a Owl Carousel in HTML and CSS. Now Earlier in my last tutorial I showed you how to create a Login Form with input Database. But in this tutorial you’ll learn a lot about CSS animation, Now on the Owl Carousel you can see we have five cards A,B,C,D,E, and you can also see a Sliding Animation on those cards moving but if user hover around the card those sliding animation stops the Owl Carousel becomes inactive. This is just basic CSS script no JavaScript but if you know the basic of animations code you’ll be able to make something unique like this.

Link to Sliding Animation Card Using HTML and CSS only

Download Code Files

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Owl-carousel using HTML CSS only</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
      <div class="carousel">
        <input type="checkbox" name="" id="dot">
        <label for="dot" class="dot1"></label>
        <label for="dot" class="dot2"></label>
        <div class="card cards-1">A</div>
        <div class="card cards-2">B</div>
        <div class="card cards-3">C</div>
        <div class="card cards-4">D</div>
        <div class="card cards-5">E</div>
      </div>
    </div>
</body>
</html>

CSS CODE

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
.wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}
.wrapper .carousel{
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
}
.wrapper .card{
  background: #e74c3c;
  line-height: 250px;
  text-align: center;
  color: #fff;
  font-size: 90px;
  width: 300px;
  font-weight: 600;
  margin: 20px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  pointer-events: none;
}
.wrapper .card{
  display: flex;
  justify-content: space-around;
  position: relative;
  left: 185px;
  animation: carousel 3s linear infinite;
}
.carousel .card .cards{
  overflow: hidden;
}
.carousel .card.cards-2{
  background: #3498db;
}
.carousel .card.cards-3{
  background: #16a085;
}
.carousel .card.cards-4{
  background: #2c3e50;
}
.carousel .card.cards-5{
  background: #630460;
}
@keyframes carousel {
  80%{
    left: -185px;
  }
  90%{
    left: 185px;
  }
}
label{
  position: fixed;
  top: 80%;
  left: 47%;
  transform: translate(-50%,-50%);
  padding: 5px 20px;
  border-radius: 20px;
  border: 2px solid #0072bc;
  cursor: pointer;
  transition: all 0.3s ease;
}
label:hover{
  background: #0072bc;
}
.dot2{
  margin: 0 60px;
}
#dot:checked ~ .card{
  transition: all 0.3s ease;
  left: -185px;
}
.wrapper .carousel:hover .card{
  animation-play-state: paused;
}
@media (max-width: 980px) {
  .wrapper{
    width: 100%;
    padding: 20px 20px;
  }
  @keyframes carousel {
    80%{
      left: -285px;
    }
    90%{
      left: 285px;
    }
  }
}

Creative Sliding Animation Card Using HTML and CSS only

Creative Tutorials

Post a Comment

Post a Comment

Contact Form