Create a Romantic 'I Love You' Animation with HTML & CSS for YouTube Shorts

Author - JigsHub
November 08, 2024
0

  In this tutorial, we’ll create a beautiful "I Love You" animation using only HTML and CSS, perfect for YouTube Shorts or any other short-form content platform! This animation features a pulsing heart and smooth fade-in text with a romantic gradient background, making it ideal for expressing your love in a visually appealing way. Whether you're a beginner or an experienced coder, follow this step-by-step guide to bring your heartfelt message to life with just a few lines of code!


HTML

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>I Love You Animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>I <span class="heart">💖</span> You</h1>
    <p class="message">Forever and Always</p>
  </div>
</body>
</html>
CSS (style.css)
css
/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  overflow: hidden;
}

.container {
  text-align: center;
  color: #fff;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Main Text */
h1 {
  font-size: 4em;
  font-weight: bold;
  animation: fadeIn 2s ease-in-out forwards;
  opacity: 0;
}

/* Heart Animation */
.heart {
  color: #ff5a5f;
  display: inline-block;
  animation: pulse 1s infinite;
}

/* Message Text */
.message {
  font-size: 1.5em;
  margin-top: 20px;
  opacity: 0;
  animation: fadeIn 3s ease-in-out forwards;
}

/* Animations */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
Tags

You may like these posts

Show more

Post a Comment

0Comments

If you have any doubts, Please let me know

Post a Comment (0)
Share to other apps
Copy Post Link