Webleb - UI Elements - Animated Sign In Form

HTML

CSS

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: sans-serif;
 }

body {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     background: #23242a;
 }

.box {
     position: relative;
     width: 380px;
     height: 420px;
     background: #1c1c1c;
     border-radius: 8px;
     overflow: hidden;
 }

.box::before{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
        height: 420px;
    background: linear-gradient(0deg,transparent,transparent,#45f3ff,#45f3ff,#45f3ff);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
 }
 .box::after{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 380px;
        height: 420px;
    background: linear-gradient(0deg,transparent,transparent,#45f3ff,#45f3ff,#45f3ff);
    z-index: 1;
    transform-origin: bottom right;
    animation: animate 6s linear infinite;
    animation-delay: 3s;
 }
 .borderline{
    position: absolute;
    top: 0;
    inset: 0;
 }
 .borderline::before{
    content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 380px;
        height: 420px;
        background: linear-gradient(0deg, transparent, transparent, orange, orange, orange);
        z-index: 1;
        transform-origin: bottom right;
        animation: animate 6s linear infinite;
        animation-delay:-1.5s ;
 }
 .borderline::after{
    content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 380px;
        height: 420px;
        background: linear-gradient(0deg, transparent, transparent, orange, orange, orange);
        z-index: 1;
        transform-origin: bottom right;
        animation: animate 6s linear infinite;
        animation-delay:-4.5s ;
 }

@keyframes animate
 {
  0% 
    {transform:rotate(0deg);}
  100% 
    {transform:rotate(360deg);}
 }

.box form{
    position: absolute;
    inset: 4px;
    background: #222;
    padding: 50px 40px;
    border-radius: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
 }
 .box form h2{
    color:#fff ;
    font-weight:500 ;
    text-align:center ;
    letter-spacing: 0.1em;
 }
 .box form .inputbox{
    position: relative;
    width: 300px;
    margin-top: 35px;
 }
 .box form .inputbox input{
    position: relative;
    width: 100%;
    padding: 20px 10px 10px;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    color: white;
    font-size: 1em;
    letter-spacing: 0.05em;
    transition: 0.5s;
    z-index: 10;
 }
 .box form .inputbox span{
    position: absolute;
   left: 0;
   pointer-events: none;
    padding: 20px 0px 10px;
    color:red;
    font-size: 1em;
    letter-spacing: 0.05em;
    transition: 0.5s;
 }
 
 .box form .inputbox input:valid ~ span,
 .box form .inputbox input:focus ~ span{
    color:blue;
    font-size: 0.75em;
 transform: translateY(-34px);
 }
.box form .inputbox i{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: goldenrod;
    border-radius: 4px;
    overflow: hidden;
    transition: 0.5s;
    pointer-events: none;
}
 .box form .inputbox input:valid~i,
 .box form .inputbox input:valid~i{
    height: 44px;
 }
 .box form .links{
    display: flex;
    justify-content: space-between;
 }
 .box form .links a{
  margin: 10px 0;
  font-size: 0.75em;
  color: green;
  text-decoration: none;
 }
 .box form .links a:hover{
 
  color: rgb(128, 64, 0);

}
 .box form input[type="submit"]
 {
    border: none;
    outline: none;
    padding: 9px 25px;
    background: yellow;
    cursor: pointer;
    font-size:0.9em ;
    font-weight: 600;
    border-radius: 4px;
    width:100px;
    margin-top: 10px;
 }
 .box form input[type="submit"]:active{
    opacity: 0.8;
 }

Animated Sign In Form

Recommended

Real Estate Agency Landing Page

React Netflix Landing Page

Login

HTML

CSS

JS

Recommended

Real Estate Agency Landing Page

React Netflix Landing Page

Login

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS