Ejemplo de formulario de inicio de sesión animado HTML

664 alejandrokundrah

Abrir en el editor Publica tu código

Ejemplo de formulario de inicio de sesión animado HTML

Recomendado

16 April 2025

Animación de texto para enlaces

5 June 2024

Página de inicio de sesión 3D

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

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

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

.container{
    position: relative;
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container i{
    position: absolute;
    inset: 0;
    border: 1.5px solid #fff;
    transition: .5s;
}

.container i:nth-child(1){ animation: animate 5s linear infinite;}

.container i:nth-child(2){ animation: animate 7s linear infinite;}

.container i:nth-child(3){ animation: animate 11s linear infinite;}

.container:hover i{
    border: 6px solid var(--clr);
    filter: drop-shadow(0 0 20px var(--clr));
}

.login{
    position: absolute;
    width: 300px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.login h2{
    font-size: 2em;
    color: #fff;
}

.login .input-box{
    position: relative;
    width: 100%;
}

.login .input-box input{
    position: relative;
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 40px;
    font-size: 1.2em;
    color: #fff;
    box-shadow: none;
    outline: none;
}

.login .input-box input[type="submit"]{
    width: 100%;
    background: #0078ff;
    background: linear-gradient(45deg, #0d10d8, #cb0fd1);
    border: none;
    cursor: pointer;
}

.login .input-box input::placeholder{ color: rgba(205, 225, 225, .75);}

.login .links{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
}

.login .links a{
    color: #fff;
    text-decoration: none;
}

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

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

Ejemplo de formulario de inicio de sesión animado HTML

Recomendado

Un código de anhtuanle2004yst

Animación de texto para enlaces

Página de inicio de sesión 3D

HTML

CSS

JS

Recomendado

Un código de anhtuanle2004yst

Animación de texto para enlaces

Página de inicio de sesión 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS