Hey awesome folks! Today, let’s jazz up your login experience by creating a cool Animated Login Form using just HTML and CSS. This project is perfect for both beginners wanting to spice up their skills and experienced developers aiming to add a touch of flair to their login pages.
We’ll keep it straightforward and snazzy, using HTML to set up the structure and CSS to add those eye-catching animations. No need for complicated setups – just pure coding fun!
So, join me in making login forms a bit more exciting. Whether you’re a coding enthusiast or just curious about web development, this tutorial is a fantastic chance to learn and enjoy a bit of creative coding.
Ready to add some pizzazz to your login page? Let’s dive into the code and bring your Animated Login Form to life!
HTML :
The provided code is an HTML document that represents an animated Glassmorphism login page. It includes various elements such as background images, a login form, and styling using CSS. The page uses the Glassmorphism design trend, which involves creating a frosted glass-like effect on elements.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Animated Glassmorphism Login Page | @codingstella</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <div class="leaves"> <div class="set"> <div><img src="leaf_01.png"></div> <div><img src="leaf_02.png"></div> <div><img src="leaf_03.png"></div> <div><img src="leaf_04.png"></div> <div><img src="leaf_01.png"></div> <div><img src="leaf_02.png"></div> <div><img src="leaf_03.png"></div> <div><img src="leaf_04.png"></div> </div> </div> <img src="bg.jpg" class="bg"> <img src="girl.png" class="girl"> <img src="trees.png" class="trees"> <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 class="group"> <a href="#">Forget Password</a> <a href="#">Signup</a> </div> </div> </section> </body> </html>
CSS :
This CSS code styles a login form with a background image. It ensures consistent spacing and font across the page. The form is centered vertically and horizontally within its container. Input fields and the submit button have specific styles for appearance. Additionally, there are animations for a girl image moving from side to side and falling leaves in the background, enhancing the visual appeal of the page.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
section {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
}
section .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section .trees {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 100;
pointer-events: none;
}
section .girl {
position: absolute;
scale: 0.65;
pointer-events: none;
animation: animateGirl 10s linear infinite;
}
@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);
}
}
.login {
position: relative;
padding: 60px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(15px);
border: 1px solid #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 20px;
width: 500px;
display: flex;
flex-direction: column;
gap: 30px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}
.login h2 {
position: relative;
width: 100%;
text-align: center;
font-size: 2.5em;
font-weight: 600;
color: #8f2c24;
margin-bottom: 10px;
}
.login .inputBox {
position: relative;
}
.login .inputBox input {
position: relative;
width: 100%;
padding: 15px 20px;
outline: none;
font-size: 1.25em;
color: #8f2c24;
border-radius: 5px;
background: #fff;
border: none;
margin-bottom: 30px;
}
.login .inputBox ::placeholder {
color: #8f2c24;
}
.login .inputBox #btn {
position: relative;
border: none;
outline: none;
background: #8f2c24;
color: #fff;
cursor: pointer;
font-size: 1.25em;
font-weight: 500;
transition: 0.5s;
}
.login .inputBox #btn:hover {
background: #d64c42;
}
.login .group {
display: flex;
justify-content: space-between;
}
.login .group a {
font-size: 1.25em;
color: #8f2c24;
font-weight: 500;
text-decoration: none;
}
.login .group a:nth-child(2) {
text-decoration: underline;
}
.leaves {
position: absolute;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
pointer-events: none;
}
.leaves .set {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.leaves .set div {
position: absolute;
display: block;
}
.leaves .set div:nth-child(1) {
left: 20%;
animation: animate 20s linear infinite;
}
.leaves .set div:nth-child(2) {
left: 50%;
animation: animate 14s linear infinite;
}
.leaves .set div:nth-child(3) {
left: 70%;
animation: animate 12s linear infinite;
}
.leaves .set div:nth-child(4) {
left: 5%;
animation: animate 15s linear infinite;
}
.leaves .set div:nth-child(5) {
left: 85%;
animation: animate 18s linear infinite;
}
.leaves .set div:nth-child(6) {
left: 90%;
animation: animate 12s linear infinite;
}
.leaves .set div:nth-child(7) {
left: 15%;
animation: animate 14s linear infinite;
}
.leaves .set div:nth-child(8) {
left: 60%;
animation: animate 15s linear infinite;
}
@keyframes animate {
0% {
opacity: 0;
top: -10%;
transform: translateX(20px) rotate(0deg);
}
10% {
opacity: 1;
}
20% {
transform: translateX(-20px) rotate(45deg);
}
40% {
transform: translateX(-20px) rotate(90deg);
}
60% {
transform: translateX(20px) rotate(180deg);
}
80% {
transform: translateX(-20px) rotate(45deg);
}
100% {
top: 110%;
transform: translateX(20px) rotate(225deg);
}
}
In summary, we’ve crafted a captivating Animated Login Form using just HTML and CSS, merging structure and style to elevate user experience. Whether you’re a beginner or a seasoned developer, this tutorial has empowered you to infuse creativity into your projects.
Facing any problems in your project ? Stay confident! Click Download, obtain the source code, and tackle your coding issues with determination. May your coding experience be smooth and rewarding!
