Webleb - fragmentos de código - Formulario de inicio de sesión animado

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;
 }

Formulario de inicio de sesión animado

Recomendado

Control deslizante de imágenes 2.0

contraseña de inicio de sesión

Proyecto de sombreado WebGL

HTML

CSS

JS

Recomendado

Control deslizante de imágenes 2.0

contraseña de inicio de sesión

Proyecto de sombreado WebGL

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS