Water Drop Card Animation

Home / Web Code Snippet / Water Drop Card Animation

Water Drop Card Animation

                                                           https://youtube.com/shorts/QP4VBcYE_HE?si=Xn35KJF5xf1USuF5


HTML CODE :-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title></title>
</head>
<body>
  <div class="container">
   <div class="drop">
      <h3>Saksham Digital Technology</h3>
      <p>we offer various Software Courses along with proper placement assistance.</p>
      <a class="read-btn" href="#">Read More</a>
    </div>
  </div>
</body>
</html>
CSS CODE :-

body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9f7f7;
}

.drop {
    position: relative;
    width: 250px;
    height: 250px;
    box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.1),
    25px 35px 20px rgba(0, 0, 0, 0.1), 25px 30px 30px rgba(0, 0, 0, 0.1),
    inset -20px -20px 25px rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 45px;
    transition: border-radius 0.5s;
    overflow: hidden;
    border-radius: 45% 55% 66% 34% / 38% 46% 54% 62%;
    text-align: center;
    animation: drop 2s infinite alternate ease-in-out;
}
@keyframes drop {
  from {
     border-radius: 45% 55% 66% 34% / 38% 46% 54% 62%;
  }
  to {
     border-radius: 56% 44% 31% 69% / 56% 46% 54% 44%  ;
  }
}
.drop::before {
  content: "";
  position: absolute;
  top: 45px;
  left: 75px;
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 50%;
  opacity: 0.7;
}
.drop::after {
  content: "";
  position: absolute;
  top: 80px;
  left: 100px;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  opacity: 0.7;
}
.read-btn {
  text-decoration: none;
  color: black;
  padding: 10px 20px;
  cursor: pointer;
  border: 2px solid #010424;
  border-radius: 20px;
}
.read-btn:hover{
    background-color: #010424;
    color: white;
}
h3{
    padding-top: 30px;
}