Lady in Cycle Animated SignUp

AI Overview: Lady in Cycle Animated SignUp

This project is a visually immersive "Sign In" page that combines modern UI design with dynamic background animations. Its main purpose is to provide a creative and engaging user experience by placing a functional login form within a living, nature-themed environment. The project features a "glassmorphism" style login box, falling leaf animations, and a character that moves across the screen.

The project is built using a layered HTML structure and advanced CSS animations. The background is composed of several stacked images (a base background, trees, and a girl) positioned absolutely to create depth. The login form sits in the center of the screen, using semi-transparent colors and blur effects to achieve a "frosted glass" look that allows the background animations to remain partially visible behind the text fields.

The movement in the scene is driven entirely by CSS @keyframes. One set of animations controls the "girl" character, moving her horizontally across the viewport and flipping her direction at the halfway point. Another set of animations is applied to multiple "leaf" elements, which fall from the top of the screen at varying speeds and rotation angles to simulate a natural breeze.

Key Code Snippets

1. Glassmorphism Styling
This CSS block creates the "frosted glass" effect for the login container by combining a semi-transparent background with a backdrop blur.

.login {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px);
  border: 1px solid #fff;
  border-radius: 20px;
}

2. Character Animation Logic
This animation moves the character across the screen and uses rotateY(180deg) to flip the image so she appears to turn around and walk back.

@keyframes animateGirl {
  0% { transform: translateX(calc(100% + 100vw)); }
  50% { transform: translateX(calc(-100% - 100vw)); }
  50.01% { transform: translateX(calc(-100% - 100vw)) rotateY(180deg); }
  100% { transform: translateX(calc(100% + 100vw)) rotateY(180deg); }
}

3. Falling Leaves Animation
This snippet controls how the leaves drift from the top of the screen to the bottom while rotating and changing opacity.

@keyframes animate {
  0% {
    opacity: 0;
    top: -10%;
    transform: translateX(20px) rotate(0deg);
  }
  100% {
    top: 110%;
    transform: translateX(20px) rotate(225deg);
  }
}

4. Form Structure
The HTML defines a clean, simple structure for the user credentials and the submission button inside the animated section.

<div class="login">
    <h2>Sign In</h2>
    <div class="inputBox"><input type="text" placeholder="Username"></div>
    <div class="inputBox"><input type="password" placeholder="Password"></div>
    <div class="inputBox"><input type="submit" value="Login" id="btn"></div>
</div>