Hey, developers welcome to Day-2 of our 90Projects IN 90Days challenge. And in Day-2 we are going to create an Animated Login form using HTML and CSS.
In this Project when a user starts typing on the input area then the area will change its color.
.png)
HTML Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Animated Login Form </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<h2 class="login-title"> Login </h2>
<input type="text" name="text" class="userName" placeholder="username">
<input type="password" name="password" class="userPassword" placeholder="password">
<button class="loginBtn"> Login </button>
</div>
<!-- Animated Login form using HTML and CSS by raju_webdev [Geeks Help] -->
</body>
</html>
CSS Code
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.form-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: black;
color: white;
width: 25rem;
border-radius: 10px;
padding: 5em 2rem;
box-shadow: 0px 0px 20px 0px black;
border: 1px solid black;
}
.login-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.userName,
.userPassword {
text-align: center;
border: 2px solid cyan;
margin: 1rem;
color: white;
background: transparent;
padding: 1rem 2rem;
border-radius: 3rem;
width: 15rem;
font-size: 1.2rem;
outline: none;
transition: all .2s ease-in-out;
}
.userName:focus,
.userPassword:focus {
width: 20rem;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes colorChange {
0% {
border-color: green;
color: green;
}
10% {
border-color: yellow;
color: yellow;
}
20% {
border-color: hotpink;
color: hotpink;
}
30% {
border-color: red;
color: red;
}
40% {
border-color: purple;
color: purple;
}
50% {
border-color: yellow;
color: yellow;
}
60% {
border-color: cyan;
color: cyan;
}
70% {
border-color: skyblue;
color: skyblue;
}
80% {
border-color: pink;
color: pink;
}
90% {
border-color: red;
color: red;
}
100% {
border-color: yellow;
color: yellow;
}
}
.loginBtn {
background: transparent;
border: 2px solid green;
padding: 1rem 3rem;
border-radius: 6rem;
text-decoration: underline;
font-size: 1rem;
color: white;
cursor: pointer;
transition: all .3s ease-in-out;
}
.loginBtn:hover {
background: green;
border: 2px solid green;
}
Tags
90 DAY CHALLENGE