HOW TO MAKE HAPPY NEW YEAR WISHING WEB PAGE USING CSS & HTML.

HAPPY NEW YEAR WISHING WEB FULL ANIMATION USING HTML AND CSS.

May this year bring new happiness, new goals, new achievements, and many new inspirations to your life. Wishing you a year fully loaded with happiness. I hope that this new year will be the best year of your life. May all your hopes are fulfilled and all your dreams come true.

index.html

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Happy New Year 2021 - Sagar Developer</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="banner">
    <div class="bubble">
      <img src="wish.png" alt="">
    </div>
  </div>
</body>

</html>

style.css

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >
body {
    margin: 0;
    padding: 0;
    background: url(img.jpg);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.banner {
    height: 100vh;
}

.banner:before {
    content: '';
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    background: url(snow.png);
    animation: animate 10s linear infinite;
}

@keyframes animate {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 550px;
    }
}
.bubble img{
    width: 50%;
    animation: bubble 7s linear infinite;
}
.bubble{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    bottom: -70;
}

@keyframes bubble{
    0%{
        transform: translatex(40vh);
        opacity: 0;
    }
    50%{
        opacity: 1;
    } 
    70%{
        opacity: 1;
    } 
    100%{
        transform: translateY(-50vh);
        opacity: 0;
    }
}

Sagar Developer

HOW TO MAKE HAPPY NEW YEAR WISHING WEB PAGE USING CSS & HTML.

HAPPY NEW YEAR WISHING WEB FULL ANIMATION USING HTML AND CSS.

Background Images Download From Here

2/Post a Comment/Comments

Post a Comment

About Us

Contact Form

HOW TO MAKE HAPPY NEW YEAR WISHING WEB PAGE USING CSS & HTML.

HAPPY NEW YEAR WISHING WEB FULL ANIMATION USING HTML AND CSS.

Background Images Download From Here

Related Posts

2/Post a Comment/Comments

Post a Comment

Contact Form