Login Form Animation
About this project
This project builds a login form where the visual interest comes entirely from three plain i elements. Those elements have no semantic meaning in HTML. They are used here purely as styling hooks. Each one is stretched to cover the full area of the parent container using inset: 0. They stack on top of each other and each one spins continuously using the same animate keyframe but at a different speed and direction. The result is three overlapping rotating borders that never sync up perfectly which keeps the animation from looking repetitive.
Each i element gets its color from a CSS custom property called --clr set directly in the HTML as an inline style. The CSS does not hardcode any colors for the borders or the glow. It just reads whatever color was passed in through that variable. That setup means you can add a fourth or fifth animated border by adding one more i tag with a new color value and the CSS handles the rest without any changes.
The glow effect on hover uses filter: drop-shadow() rather than box-shadow. That distinction matters because box-shadow follows the rectangular boundary of the element. drop-shadow follows the actual visual shape including transparent areas and border curves. For rounded glowing borders that difference is visible and drop-shadow produces a cleaner result.
The login form sits inside the same container and is positioned absolutely so it floats above the spinning borders. The borders animate underneath it without affecting the layout of the inputs or the submit button.
What you will learn
You will learn how to use inset as a shorthand. Setting inset: 0 on an absolutely positioned element is the same as writing top: 0; right: 0; bottom: 0; left: 0. It stretches the element to fill its positioned parent completely. This is a modern CSS property that replaces a pattern most developers still write the long way.
You will understand how inline CSS variables work. Passing --clr as an inline style on individual elements and then reading it in a shared CSS rule is a clean way to create variations of the same component without duplicating styles or writing JavaScript. You will learn the practical difference between box-shadow and drop-shadow. After building this project and seeing the glow hug the border curves you will never reach for the wrong one again.
You will get comfortable assigning the same keyframe animation to multiple elements with different durations and directions. That technique of reusing one animation definition with varied timing is fundamental to building layered motion that feels organic rather than mechanical.
You will also practice using backdrop-filter or background blur on form containers which is a common pattern in modern UI design for making content readable over busy animated backgrounds.
Understand with AI
Get an AI-generated overview or a file-by-file code breakdown. Ask questions about the project below the overview.
This project creates an animated login form with a visually engaging background. The main purpose is to provide a stylish and interactive login interface. Key features include animated borders that rotate and change shape around the login form, input fields for username and password, a submit button, and links for "Forget Password" and "Signup."
The project is structured using HTML for the content and CSS for styling and animation. The HTML sets up the basic layout, including a div with the class square that acts as a container for the animated elements and the login form itself.
<div class="square">
<i style="--clr:#00ff0a;"></i>
<i style="--clr:#ff0057;"></i>
<i style="--clr:#fffd44;"></i>
<div class="login">
<h2>Login</h2>
<div class="inputBx">
<input type="text" placeholder="Username">
</div>
<div class="inputBx">
<input type="password" placeholder="Password">
</div>
<div class="inputBx">
<input type="submit" value="Sign in">
</div>
<div class="links">
<a href="#">Forget Password</a>
<a href="#">Signup</a>
</div>
</div>
</div>This HTML snippet defines the square container which holds the animated i elements and the login form. The i elements are styled using inline CSS variables (--clr) to define their colors, which are then used in the CSS for the animations.
The CSS is responsible for the visual appearance and the animations. It styles the body to center the content, defines the square container, and creates the animated borders using i elements. These i elements are absolutely positioned and have different border-radius values and animations applied to them.
.square i
{
position: absolute;
inset: 0;
border: 2px solid #fff;
transition: 0.5s;
}
.square:hover i
{
border: 6px solid var(--clr);
filter: drop-shadow(0 0 20px var(--clr));
}These CSS rules style the i elements within the .square class, making them absolute positioned borders. When the user hovers over the .square, the borders change color and gain a glow effect based on the --clr variable set in the HTML.
The login div contains the actual form elements. The input fields and submit button are styled to fit within the animated background, with rounded borders and a gradient for the submit button.
@keyframes animate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}This CSS keyframe animation, named animate, defines a rotation from 0 to 360 degrees, which is applied to the i elements to create a spinning effect for the borders.
The animation is triggered by the @keyframes rule and applied to the i elements within the .square class. Different i elements have different animation durations and directions, creating a dynamic and layered visual effect. The login form itself is positioned absolutely within the square and styled to be centered and visually distinct.
Ask about this project
Have a question about how this project works? Ask below and get an answer based on the project code.
Code Breakdown
Structured technical breakdown for beginners. Anyone can generate or regenerate; your version is saved in this browser (local storage).
No breakdown yet. Generate one to see a file-by-file explanation. Your version is saved in this browser.
Comments
No comments yet. Sign in to leave a comment.
Sign in to leave a comment.