Happy New Year 2026 Special Animation

on
0

Melting Text Animation Effect, html full course, css full course

on
Melting Text Animation - Tutorial

Melting Text Animation Effect

Create a stylish melting text effect using pure HTML & CSS.

1. Live Demo (Output)

melting

2. HTML Code

<div class="count">
    <h1 class="text">melting</h1>
</div>

3. CSS Code

.count {
    position: relative;
    overflow: hidden;
}
.text {
    font-size: 6rem;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    background: linear-gradient(90deg, #ff6f61, #ffbd44, #ff6f61);
    -webkit-background-clip: text;
    color: transparent;
    animation: melt 3s ease-in-out infinite;
}
@keyframes melt {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(20px); }
}
.text::before {
    content: 'MELTING';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, #ff6f61, #ffbd44, #ff6f61);
    -webkit-background-clip: text;
    color: transparent;
    z-index: -1;
    transform: scaleY(1);
    opacity: 0.5;
    animation: anim 3s ease-in-out infinite;
}
@keyframes anim {
    0%, 100% { transform: scaleY(1); opacity: 0.5; }
    50% { transform: scaleY(1.5); opacity: 0.7; }
}

4. How to Use / Kaise Use Karein

English Guide

  • Step 1: Copy the HTML structure and paste it inside your <body> tag.
  • Step 2: Copy the CSS and paste it inside your <style> tag or external CSS file.
  • Step 3: Save the file as index.html.
  • Step 4: Open the file in any modern web browser to see the effect.

Hindi Guide

  • Step 1: HTML code ko copy karein aur apne document ke <body> mein paste karein.
  • Step 2: CSS code ko copy karke <style> tag ya CSS file mein daalein.
  • Step 3: File ko index.html naam se save karein.
  • Step 4: Kisi bhi browser mein file open karke animation ka maza lein.

Comments

Post a Comment