3D Heartbeat Animation Using HTML and CSS

Hello dosto, hum is article me 3D Heartbeat Animation HTML aur CSS ka use kar ke banaenge. Heart Animation web design ke liye ek acchi practice hai. Hum HTML aur CSS ka use kar ke ek sandar responsive heartbeat animation website banaenge.
3D Heartbeat Animation Using HTML and CSS

3D Heartbeat Animation Using HTML and CSS

Heartbeat animation ek simple project hai jisme hum dil ke aakar ko banane k liye CSS ka use karenge jo ki ushi tarah se animated hoga jaise humare dil ke bhitar oxygen pravaah aur bahirvaah parinaam swaroop ek vastavik dil dhadakta hai. Is project me, hum dil ki dhadkan ka animation banaenge jo bilkul ek heartbeat ke saman hoga.

Mujhe ummid hai ki aapko acche se is project ke bare mei jaankari mil gai hogi. To aaiye Source Codes jodkar apna 3D Heartbeat Animation project suru kare

Full Code:-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Heart Beat Animation</title>
  <style>
    body{
      margin: 0;
      padding: 0;
      background: #262626;
    }
    .center{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     padding: 100px;
     background: #262626;
     border: 5px solid #fff;
     border-radius: 50%;
     box-shadow: 45px 45px 45px rgba(0,0,0,.8);
     z-index:1;
     overflow: hidden;
    }
    .center::before{
      content: '';
      position: absolute;
      top: 0;
      left: -50%;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.3);
    }
    .heart{
      position: relative;
      width: 100px;
      height: 100px;
      background: #f00;
      transform: rotate(45deg) translate(10px, 10px);
      animation: meet 1s linear infinite;
    }
    .heart::before{
      content: '';
      width: 100%;
      height: 100%;
      background: #f00;
      position: absolute;
      top: -50%;
      left: 0;
      border-radius: 50%;
    }
    .heart::after{
      content: '';
      width: 100%;
      height: 100%;
      background: #f00;
      position: absolute;
      bottom: 0%;
      right: 50%;
      border-radius: 50%;
    }
    @keyframes meet{
      0%{
      transform: rotate(45deg) translate(10px, 10px) scale(1);
      }
      25%{
      transform: rotate(45deg) translate(10px, 10px) scale(1);
      }
      30%{
      transform: rotate(45deg) translate(10px, 10px) scale(1.4);
      }
      50%{
      transform: rotate(45deg) translate(10px, 10px) scale(1.2);
      }
      70%{
      transform: rotate(45deg) translate(10px, 10px) scale(1.4);
      }
      90%{
      transform: rotate(45deg) translate(10px, 10px) scale(1);
      }
      100%{
      transform: rotate(45deg) translate(10px, 10px) scale(1);
      }
    }
    
  </style>
</head>
<body>
  <div class="center">
    <div class="heart"></div>
  </div>
</body>
</html>

Result:

3D Heartbeat Animation Using HTML and CSS
Video LInk:- Click me
Ab humne apna 3D Heartbeat Animation saphaltapoorvak bana liya hai, ap is project ka use apne frontend skills ko develop karne ke liye kar sakte hai.
Humari website me aane ke liye apka dhanyawaad!

एक टिप्पणी भेजें

0 टिप्पणियाँ
* Please Don't Spam Here. All the Comments are Reviewed by Admin.